要回答这个问题,首先要知道的知识点有:
- 现代浏览器对 esm 模块原生支持,参考这篇文章
- vite 是基于模块的构建工具
- vite 相比于其他的构建工具(比如:webpack)的优势在于开发阶段的优化: 快速启动,快速热更新
- 然后重点要看一下 vite 官网 ,本篇文章大部分内容来自官网。
注意,vite 和webpack 一样,都有一个开发服务器,客户端都是浏览器,这个开发服务器是构建工具功能,普通的开发者你不研究是看不到的,这个是构建工具源码的功能。
用自己的语言总结一下:
首先在开发阶段
使用 esbuild 对依赖进行预构建,esbuild 的打包速度很快。
- 依赖 大多为在开发时不会变动的纯 JavaScript。一些较大的依赖(例如有上百个模块的组件库)处理的代价也很高。依赖也通常会存在多种模块化格式(例如 ESM 或者 CommonJS)。
利用了现代浏览器对 esm 原生支持这一特性,以 原生 ESM 方式提供源码,这实际上是让浏览器接管了打包程序的部分工作:Vite 只需要在浏览器请求源码时进行转换并按需提供源码,根据情景动态导入代码,即只在当前屏幕上实际使用时才会被处理。
源码 通常包含一些并非直接是 JavaScript 的文件,需要转换(例如 JSX,CSS 或者 Vue/Svelte 组件),时常会被编辑。同时,并不是所有的源码都需要同时被加载(例如基于路由拆分的代码模块)。
按需加载:在浏览器执行 esm 的 import 时,浏览器会向开发服务器请求该模块。
热更新是基于 websocket 实现的,也是在 esm 上执行的,只更新编辑了的文件,而不是把整个页面重新编译。
在 Vite 中,HMR 是在原生 ESM 上执行的。当编辑一个文件时,Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失活[1](大多数时候只是模块本身),使得无论应用大小如何,HMR 始终能保持快速更新。
vite 使用 http 缓存来加速页面的重新加载,源码模块会进行协商缓存,依赖模块会进行强缓存。
在生产环境
- 使用 rollup 进行打包,因为rollup 和vite 的api 能够很好的兼容,而且社区比较活跃,有很多插件可以使用。这一点在 vite官网有提到。
- 需要打包而不是继续和开发环境一样使用esm 因为,发布未打包的esm效率很低,所以还是需要对代码进行优化,tree-shaking、懒加载和分割等优化。
具体的看 vite 官网的这一页内容,就可以。