Vite
vite
基于原生 ESModule
<script module>
进行构建项目。没有打包的过程,源码直接传输给浏览器,更快的冷启动和热更新
实现了真正的按需编译
生产环境提供了 vite build 进行打包,基于rollup
vite VS webpack
webpack
从entry入口文件开始,根据loader、plugin配置规则对所有模块进行递归编译,输出bundle到指定的output【项目依赖越多,构建就会越慢】
vite
从index.html入口开始,Vite 按需加载,利用浏览器对 ESModule 的支持,让浏览器接管了打包程序的部分工作
- 当浏览器执行到 import 后,才会去服务器读取该模块依赖,这就保证了只有在真正使用模块的时候,才会解析这个模块,对于暂时没有用到的模块,完全不参与解析的过程,最大程度做到按需加载
- 将应用中的模块区分为 依赖 和 源码 两类,改进了开发服务器启动时间;Vite 将会对依赖使用 esbuild 预构建依赖 和 依赖缓存
(node_modules/.vite)
vite优势
- 利用浏览器内置 ES Module 的支持(script 标签加上属性type="module"),浏览器直接向 dev server 逐个请求各个模块,而不需要提前把所有文件打包。
- 借助 esbuild 超快的编译速度把第三方库进行预构建,将零散的文件打到一起,减少网络请求; 另一方面全面转换为 ESM 模块语法,以适配浏览器内置的 ESM 支持。
预购建
当第三方依赖过多的时候,会发送几十甚至几百个http请求,例如:loadsh工具库,600多个模块
- vite(默认配置)在启动时会进行一次依赖预构建(大概200ms)成单个模块,并响应浏览器HTTP 头 max-age=31536000,immutable 强缓存