Vite

定义

Vite 是一个由 Evan You（尤雨溪）开发的现代化的前端构建工具，旨在提供更快、更轻量级的开发体验。它通过利用浏览器原生的 ES 模块（ESM）支持，在开发阶段实现按需编译，极大地缩短了启动时间和热更新速度。在生产构建时，Vite 使用 Rollup 打包代码，以实现最佳的性能和兼容性。

核心特点

• 快速冷启动: 利用 ESM，无需打包整个应用即可启动开发服务器。
• 即时热模块更换 (HMR): 修改代码后，HMR 速度极快，几乎感觉不到延迟。
• 按需编译: 只在需要时编译代码，避免了不必要的编译开销。
• 丰富的特性: 支持 TypeScript、JSX、CSS Modules 等现代 Web 开发特性。
• 插件生态系统: 拥有强大的插件生态系统，可以扩展其功能。

分类

• 开发服务器: 提供快速的开发体验。
• 构建工具: 用于生产环境的代码打包和优化。

工作流程

开发阶段

1. 冷启动开发服务器
2. ESM 按需编译（只加载不打包）
   • 👉参见 预构建机制（Vite）
3. 热更新（HMR）：当修改代码时，重新编译修改的模块并更新到浏览器
   • 👉参见 HMR原理（Vite）

生产阶段

1. 使用 Rollup 打包
2. 代码优化：Rollup 会对代码进行压缩、Tree-shaking 等优化
   • 👉参见 构建分析与优化（Vite）
3. 静态资源压缩：打包后的代码会生成静态资源文件，可以直接部署到服务器

优缺点

• 优点: - 极快的冷启动和 HMR 速度。 - 简单的配置，易于上手。 - 支持现代 Web 开发特性。
• 缺点: - 相比传统打包工具，生态系统相对较新，可能存在兼容性问题。 - 对于非常大型的项目，可能需要更细致的配置优化。

相关概念

• Rollup: 一个 JavaScript 打包工具，Vite 在生产环境中使用它。
• Webpack
• ESM (ES Modules): JavaScript 的模块化标准，Vite 利用它实现按需加载。
• HMR原理（Vite） (Hot Module Replacement): 热模块替换，允许在运行时更新模块，而无需完全刷新页面。
• 环境变量（Vite）
• 预构建机制（Vite）
• 构建分析与优化（Vite）
• 插件系统及生命周期（Vite）

知识卡片

• FAQ-Vite

  • 如何在Vite中配置环境变量？
  • 如何在Vite中进行手动拆包？
  • Vite 是如何实现原生 ESM 加载的？开发时不打包是怎么做到的？
  • Vite 在启动时会进行依赖预构建（pre-bundling），这个过程做了哪些事？为什么需要这么做？
  • Vite 插件系统和 Rollup 插件兼容，Vite 插件的生命周期钩子有哪些？能举个使用插件的场景吗？
  • Vite 构建生产环境时使用的是 Rollup，那怎么配置多页打包或代码分割？是否支持动态导入？
  • Vite 构建生产环境时使用的是 Rollup，那怎么配置多页打包或代码分割？是否支持动态导入？
  • Vite 项目变大后你遇到过哪些性能瓶颈？有哪些优化手段可以提升开发 or 打包性能？

  指向原始笔记的链接

参考资料

• Vite 官方文档
• Rollup 官方文档