Vite

Vite 是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

• 一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）。
• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

为了改进了开发服务器启动时间，Vite 通过在一开始将应用中的模块区分为依赖和源码两类：

• 依赖大多为在开发时不会变动的纯 JavaScript，Vite 将会使用 esbuild 预构建依赖。
• 源码通常包含一些并非直接是 JavaScript 的文件，需要转换且时常改变，Vite 以原生 ESM 方式提供源码。

在编译源码时，Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。

在热更新方面，Vite 的 HMR 模式是在原生 ESM 上执行的。当编辑一个文件时，Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失活（大多数时候只是模块本身），使得无论应用大小如何，HMR 始终能保持快速更新。

另外，Vite 同时利用 HTTP 头来加速整个页面的重新加载：源码模块的请求采用协商缓存，而依赖模块请求则会使用强缓存，因此一旦被缓存它们将不需要再次请求。

为了在生产环境中获得最佳的加载性能，最好还是将代码进行 tree-shaking、懒加载和 chunk 分割。目前 esbuild 一些针对构建应用的重要功能仍然还在持续开发中，所以现如今采用 Rollup 作为生产环境的编译工具。