文章目录
1.Vite 简介
在浏览器支持 ES 模块之前,JavaScript
并没有提供原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因:使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。
Vite 旨在利用生态系统中的新进展解决上述问题:浏览器开始原生支持 ES 模块,且越来越多 JavaScript 工具使用编译型语言编写。
1.1 为什么选 Vite(Vite的优点)
- 更快的启动时间:Vite 通过在一开始将应用中的模块区分为
依赖
和源码
两类,改进了开发服务器启动时间。依赖
大多为在开发时不会变动的纯 JavaScript。一些较大的依赖(例如有上百个模块的组件库)处理的代价也很高。依赖也通常会存在多种模块化格式(例如 ESM 或者 CommonJS)。Vite 将会使用esbuild
预构建依赖。esbuild 使用 Go 编写,并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。源码
通常包含一些并非直接是JavaScript
的文件,需要转换(例如 JSX,CSS 或者 Vue/Svelte 组件),时常会被编辑。同时,并不是所有的源码都需要同时被加载(例如基于路由拆分的代码模块),按需编译。
- HMR 快速更新:在 Vite 中,HMR 是在原生 ESM 上执行的。当编辑一个文件时,Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失活[1](大多数时候只是模块本身),使得无论应用大小如何,HMR 始终能保持快速更新。
- 加速页面的重新加载:Vite 同时利用 HTTP 头来加速整个页面的重新加载:
源码模块
的请求会根据 304 Not Modified 进行协商缓存,而依赖模块
请求则会通过Cache-Control: max-age=31536000,immutable
进行强缓存