Vite

构建工具。

核心原理

• 利用浏览器支持es modules 的能力，将import 的东西转换为http请求加载文件。
• 启动koa服务器拦截请求，并在后端进行相应处理，将项目中使用的文件进行分解和整合，以ESM的格式返回给浏览器。
• 开发环境启动，不对文件进行打包编译，做到了按需加载。运行速度比webpack快很多。

特点

• 快速冷启动 ：采用no bundle 和esbuild 预构建。
• 高效热更新：基于 ESM实现。增加http缓存策略：源码模块使用协商缓存，依赖模块使用强缓存。
• rollup打包： 生产环境由esbuild对css 和代码分割，并由rollup打包。

与webpack比较

• 开发环境

  • webpack 是先解析依赖，打包构建再启动开发服务器 devServer 必须等待所有模块构建完成才启动。当修改了bundle中的一个子模块，整个bundle文件都会重新打包然后输出。项目越大，启动时间越长。
  • vite 是直接启动开发服务器，利用浏览器对 esm 的支持，当 import 模块时下载被导入的模块，当代码执行到模块加载时再请求对应模块的文件，本质上实现了动态加载。

• 热更新

所有打包工具实现热更新的思路基本都是：主要通过 webSocket 创建浏览器和服务端的通信监听文件改变。当文件被修改时，服务端发送消息通知客户端修改代码，客户端对不同文件进行操作更新。

• Vite的热更新：监听文件系统的变更，只针对发生变更的模块进行重新加载。HMR的更新速度不会因为应用体积的增加而变慢。
• webpack的热更新：当修改了bundle中的一个子模块，整个bundle文件都会重新打包然后输出

基于 Esbuild 的依赖预编译优化

Vite预编译之后，将文件缓存在node_modules/.vite/文件夹下

预编译&预构建的原因：

• 支持非ESM格式的依赖：Vite 是基于浏览器原生支持ESM的能力实现的，需要将CommonJS格式的文件提前处理，转换为ESM模块并缓存在node_modules/.vite/路径。