Vite 为什么快，是怎么打包的
🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。
文章目录
- 1. 基于原生 ES 模块
- 2. 依赖预构建
- 3. 懒加载
- 4. 打包流程
- 4.1 依赖预构建
- 4.2 代码转换
- 4.3 代码优化
- 4.4 生成打包结果
- 5. 总结
Vite 是一个现代化的前端构建工具，它提供了快速的开发服务器和高效的打包功能。Vite 的速度和效率主要归功于以下几个关键因素：
1. 基于原生 ES 模块
Vite 利用了现代浏览器对原生 ES 模块的支持。在开发模式下，Vite 直接使用浏览器的模块导入功能，无需进行打包。这使得开发服务器的启动速度非常快，并且可以实时更新模块。
2. 依赖预构建
在开发模式下，Vite 会预构建项目依赖。Vite 使用 esbuild，一个极快的 JavaScript 打包器，来转换 CommonJS 模块为 ES 模块，并缓存构建结果。这使得后续的模块加载速度非常快。
3. 懒加载
Vite 支持代码的懒加载。在开发模式下，Vite 只会加载当前页面所需的模块，而不是整个项目的所有模块。这使得初始加载速度非常快。
4. 打包流程
Vite 的打包流程基于 Rollup，一个强大的 JavaScript 模块打包器。Vite 的打包流程主要包括以下几个步骤：
4.1 依赖预构建
在打包阶段，Vite 会再次进行依赖预构建。这一步是为了确保所有依赖都被正确地转换为 ES 模块，并可以进行 Tree Shaking。
4.2 代码转换
Vite 使用 Rollup 进行代码转换。Rollup 是一个 JavaScript 模块打包器，它可以将多个模块打包成一个文件。Vite 使用 Rollup 的插件系统来处理各种文件类型，如 JavaScript、CSS、图片等。
4.3 代码优化
Vite 使用 Rollup 的插件系统进行代码优化。例如，可以使用 @rollup/plugin-terser 插件进行代码压缩。
4.4 生成打包结果
最后，Vite 将打包结果输出到指定的目录。默认情况下，打包结果输出到 dist 目录。
5. 总结
Vite 的速度和效率主要归功于其基于原生 ES 模块的设计、依赖预构建、懒加载以及基于 Rollup 的打包流程。通过深入理解 Vite 的设计原理，开发者可以更好地利用这一工具，满足复杂的业务需求。希望本文对你有所帮助，如果你有任何问题或建议，欢迎在评论区留言讨论。