[TOC]
Vite(读音veet)
- 一个开发服务器。基于原生 ESM 提供了丰富的内建功能，如速度惊人的模块热更新(HMR)。
- 一套构建指令。用预配置的 Rollup 打包生产代码，可输出高度优化的静态资源。
- 提供开箱即用的配置。插件 API 和 JavaScript API 带来高度可扩展性。
解决问题：
- 缓慢的服务器启动。
- 缓慢的更新。
优化服务器启动时间
- Vite 将模块分为
依赖和源码。 - 依赖基本不变。Vite 使用 esbuild 预构建依赖，用 Go 编写的 esbuild 构建比传统的 JS 快 10 倍。
- 源码时常变化，且并不是所有源码需要同时被加载。Vite 以原生 ESM 方式提供源码。让浏览器接管了部分打包的工作。即只在屏幕中实际使用时才会被处理。
优化更新时间
- 一些打包器的开发服务器将构建内容存入缓存，这样重新加载页面时会消除应用的当前状态。所以支持了动态模块热替换(HMR)。但实践即使用 HMR 随着应用规模增长热更新速度也会显著下降。
- Vite 中的 HMR 在原生 ESM 上实现。当编辑一个文件时，Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失活(大多数只是模块本身)。
- Vite 会利用 HTTP 头加速页面重载，会根据
304 NOT MODIFIED进行协商缓存，对依赖模块通过Cache-Control: max-age=31536000, imuutable进行强缓存。
生产环境还是需要打包
- 尽管原生 ESM 得到了广泛支持，但由于嵌套导入会导致额外的网络往返，在生产环境中发布未打包的 ESM 仍然效率低下(即时使用 HTTP/2)。
- 为了在生产环境中获得最佳的加载性能，最好还是对代码进行 Tree-shaking、懒加载和 Chunk 分割(以获得更好的缓存)。
- 虽然 esbuild 快得惊人，目前还是 Rollup 更加成熟和灵活。
Vite 使用
浏览器支持
支持原生 ESM 语法的 script 标签、原生 ESM 动态导入和 import.meta 的浏览器。
传统浏览器可以通过 @vitejs/plugin-legacy 支持。