vite

Vite 是新一代前端构建工具，利用原生 ESM 提供极速开发体验，核心特性包括快速冷启动、即时热更新和按需编译。

Vite 需要 Node.js 18+ 环境，支持 npm、pnpm、yarn 多种安装方式，本文介绍具体要求与安装命令。

使用 create-vite 脚手架快速创建 Vite 项目，支持多种模板选择，创建后即可启动开发服务器。

Vite 项目目录结构简洁清晰，包括 index.html 入口、src 源码目录、public 静态资源目录等核心结构。

Vite 项目 package.json 包含 dev、build、preview 三个核心脚本，分别用于开发、构建和预览。

Vite 开发服务器通过 vite 命令启动，支持端口配置、主机绑定等选项，启动后即可开始开发调试。

配置 server.open 选项，Vite 启动时自动打开浏览器访问开发服务器，提升开发便捷性。

vite.config.js 是 Vite 的配置文件，使用 defineConfig 函数导出配置对象，提供类型提示和配置校验。

root 配置项目根目录，base 配置公共基础路径，影响资源引用路径和部署位置。

使用 resolve.alias 配置路径别名如 @，简化模块导入路径，提升代码可读性和维护性。

Vite 支持在 JS/TS 中直接导入图片、视频、音频等静态资源，返回资源 URL 用于动态引用。

public 目录存放不经 Vite 处理的静态资源，使用绝对路径引用，适合 favicon、robots.txt 等文件。

Vite 支持直接 import CSS 文件，样式作用于全局；CSS Modules 通过 .module.css 后缀实现局部作用域。

Vite 内置支持 Sass、Less、Stylus 等预处理器，安装对应依赖后可直接导入 .scss/.less/.styl 文件。

Vite 使用 .env 文件管理环境变量，只有 VITE_ 前缀的变量才能暴露给客户端代码。

通过 import.meta.env 访问 VITE_ 前缀的环境变量，可在 JS/TS 和 HTML 中使用。

使用 vite build 命令执行生产构建，输出优化后的静态文件到 dist 目录，可直接部署到服务器。

构建产物输出到 dist 目录，包含 index.html 入口、assets 资源目录，文件名带哈希后缀便于缓存管理。

使用 vite preview 命令本地预览构建产物，模拟生产环境运行效果，验证部署前的最终状态。

Vite 中 index.html 是项目入口而非 src/main.js，位于项目根目录，通过 type="module" 引入 ES 模块。

index.html 中使用 type="module" 引入 ES 模块脚本，Vite 会正确解析模块依赖并处理 import 语句。

Vite 配置支持函数形式返回配置对象，可根据 command 和 mode 动态调整配置，也支持异步加载配置。

配置 configFile 和 envDir 选项，控制配置文件和环境变量的加载位置，支持配置变更自动重启。

抽取公共配置到独立文件，在多环境间复用，通过组合策略实现配置统一管理和灵活扩展。

使用 define 选项定义全局常量，编译时替换变量值，适合版本号、构建时间等固定信息注入。

配置 resolve.extensions 自定义模块扩展名解析，简化导入语句，省略文件后缀书写。

Vite 插件兼容 Rollup 插件接口，具有双阶段钩子机制，开发环境使用 Vite 钩子，生产构建使用 Rollup 钩子。

Vite 提供官方插件如 @vitejs/plugin-vue、@vitejs/plugin-react、@vitejs/plugin-legacy 增强框架支持和浏览器兼容性。

搜索安装社区 Vite 插件扩展功能，通过 npm 安装后在 vite.config.js 中配置使用。

使用 apply 选项控制插件只在 serve 或 build 阶段生效，优化开发或构建体验。

Vite 预构建将 CJS/UMD 依赖转换为 ESM 格式，使用 esbuild 提速，缓存到 node_modules/.vite 目录。

使用 optimizeDeps.include 强制预构建指定依赖，exclude 排除依赖，控制预构建行为。

清除 node_modules/.vite 缓存或配置 force 选项强制重新预构建依赖，解决依赖更新后的缓存问题。

配置 tsconfig.json 与 Vite 协同工作，正确设置 moduleResolution、paths 与 vite.config.js 的 alias 保持一致。

Vite 开发环境不执行类型检查，需集成 vue-tsc 或 tsc 进行类型检查，建议在构建流程中运行。

配置 esbuild 对 TypeScript 的转译选项，支持装饰器、JSX 工厂函数自定义等高级配置。

配置 compilerOptions.types 指定类型声明文件，或使用三斜线指令引用，管理全局类型声明。

配置 Vue 单文件组件和 React JSX 的类型声明，确保 TypeScript 正确识别组件类型和 JSX 语法。

使用 @vitejs/plugin-vue 支持 Vue 3 单文件组件，配置 JSX 和其他 Vue 特定选项。

使用 @vitejs/plugin-react 支持 React 项目，配置 Fast Refresh 快速热更新和 JSX 转译选项。

使用 @sveltejs/vite-plugin-svelte 支持 Svelte 项目，配置预处理器和编译选项。

配置 esbuild 或 Babel 转译 JSX/TSX，自定义 JSX 工厂函数支持不同框架的组件创建方式。

针对不同框架配置构建优化选项，Vue 配置 compilerOptions，React 配置 babel 选项，提升产物质量。

配置 build.rollupOptions.manualChunks 自定义代码分割策略，将依赖和业务代码合理拆分优化加载性能。

配置 build.minify 选择 esbuild 或 terser 压缩，esbuild 速度快适合默认场景，terser 功能全面适合极致优化。

配置 build.chunkSizeWarningLimit 调整 chunk 体积警告阈值，或优化分包策略解决警告问题。

配置 build.assetsInlineLimit 控制小资源内联阈值，小于阈值的资源转为 base64 内联减少请求。

配置 build.sourcemap 控制源映射生成方式，支持 false、true、'inline'、'hidden' 等选项。

配置 build.lib 打包组件库或工具库，输出 ES Module 和 CommonJS 格式，支持 TypeScript 类型生成。

理解异步 chunk 的 CSS 提取与注入策略，CSS 随 JS chunk 分割或合并，影响加载顺序。

配置 build.cssMinify 控制生产环境 CSS 压缩，支持 esbuild、Lightning CSS 或自定义压缩工具。

配置 css.transformer 使用 Lightning CSS 加速 CSS 处理，支持 CSS Nesting 等现代特性。

为 Sass/Less 配置 API 选项、额外导入路径、全局变量注入等高级配置，提升预处理器使用效率。

配置 server.proxy 解决开发环境 API 跨域问题，将请求代理到后端服务器实现同源访问。

配置 server.cors 控制跨域资源共享策略，允许或限制跨域请求访问开发服务器资源。

配置 server.hmr 自定义热更新连接方式、覆盖策略，解决网络环境限制和自定义 HMR 场景。

配置 server.watch 控制文件监听范围与性能，忽略不需要监听的文件，优化开发体验。

Vite SSR 将模块图分为客户端和服务端两部分，服务端渲染静态 HTML，客户端注水接管交互。

配置 ssr.noExternal 处理依赖的外部化策略，控制服务端构建时哪些依赖需要打包处理。

Nuxt、Vite SSR 等框架提供开箱即用的 SSR 支持，简化服务端渲染配置和开发流程。

静态站点生成（SSG）在构建时预渲染页面，适合博客、文档站等内容固定的场景，SEO 友好且部署简单。

使用社区 vite-plugin-ssg 插件实现预渲染静态页面生成，配置路由列表和渲染选项。

根据内容动态性选择渲染方案，SSG 适合固定内容，SSR 适合动态内容，CSR 适合高度交互应用。

Vite 插件 Hook 分为 Vite 特有钩子和 Rollup 兼容钩子，config、transform、load、resolve 等钩子在不同阶段执行。

Vite 插件兼容 Rollup 钩子，开发环境部分钩子不执行，构建时完整执行 Rollup 钩子，需注意环境差异。

transform 钩子用于模块转换，实现自定义文件类型处理或语法扩展，返回转换后的代码和 Source Map。

load 钩子用于自定义模块加载，支持虚拟模块和动态生成代码，返回模块内容替代默认文件读取。

resolveId 钩子用于自定义模块路径解析，支持自定义导入路径映射、别名扩展和虚拟模块识别。

使用 createFilter 精确过滤处理文件，配合缓存策略和异步处理优化插件执行性能。

Vite 利用浏览器原生 ESM 能力，开发环境按需编译模块，不打包整个应用，实现毫秒级冷启动。

esbuild 在依赖预构建中提供极速编译速度，比 JavaScript 工具快 10-100 倍，但存在功能限制。

Vite 生产构建使用 Rollup，构建模块图、分析依赖关系、分割 chunk，生成优化后的静态产物。

Vite 模块图追踪所有模块依赖关系，支持动态导入分析、循环依赖处理和 HMR 边界计算。

HMR 边界判断确定热更新传播范围，从修改模块向上查找直到遇到 HMR 边界，边界内模块全部更新。

使用 rollup-plugin-visualizer 分析产物体积分布，识别大依赖和冗余代码，针对性优化构建产物。

分析副作用标记与模块导出优化，确保 Tree Shaking 有效移除未使用代码，减小产物体积。

设计路由级懒加载与组件预加载策略优化首屏，按需加载非首屏内容，提升页面加载性能。

使用 ?worker 参数拆分计算密集任务到独立线程，不阻塞主线程渲染，提升复杂计算场景性能。

配置持久缓存与增量构建策略加速开发体验，减少重复编译时间，提升构建效率。

优化客户端注水策略减少重复渲染与状态同步，避免注水过程中的性能问题和状态丢失。

设计服务端数据预取与客户端状态传递机制，在服务端获取数据注入页面，客户端同步避免二次请求。

实现 SSR 渲染失败降级到 CSR 的容错机制，保证页面在任何情况下都能正常显示。

理解微前端概念与 Vite 在微前端中的角色定位，将大型应用拆分为独立子应用，独立开发部署。

使用 @originjs/vite-plugin-federation 实现模块共享，主应用动态加载子应用模块，实现跨应用代码复用。

设计子应用构建产物与动态加载策略，主应用按需加载远程模块，优化加载性能和错误处理。

处理多版本共享依赖与版本冲突解决方案，使用 singleton、requiredVersion 配置管理共享依赖版本。

配置 CDN 部署策略与资源哈希命名优化缓存，静态资源上传 CDN 加速分发，提升用户访问速度。

设计构建产物版本化策略支持灰度与回滚，使用版本标识管理多版本产物，实现安全发布。

配置 CSP、SRI 等安全策略保护前端资源，防止 XSS、资源篡改等安全威胁。

集成性能监控 SDK 与构建产物追踪分析，收集页面加载性能、用户行为数据，优化用户体验。

优化 CI 构建流程与缓存策略加速部署周期，减少构建时间，实现快速迭代发布。

Vitest 与 Vite 集成提供 ESM 测试支持，配置简单、速度快，使用相同配置共享 Vite 生态。

Vitepress 基于 Vite 的文档站构建能力，Markdown + Vue 组件支持，快速构建技术文档站点。

Storybook 与 Vite 的集成配置方案，独立开发测试组件，生成组件文档和交互演示。

Astro 基于 Vite 的多框架组件支持特性，零 JS 输出、多框架组件混用、高性能静态站点。