vite 为什么比 webpack 快？

实际开发体验中，大家都可以明显感觉到 rollup 都比 webpack 启动快多了，实际是什么原因？

个人理解：

1. vite 在开发阶段，采用了 esbuild 依赖预构建，所以大家会感觉到首次 run dev 的时候会稍微慢一些，如果 package.json 中依赖的包改变了，还会重新构建依赖

2. esbuild 采用 go 开发，比 webpack 采用 js 开发快，go 是编译型语言，js 是解释性语言

3. vite 启动之后，如果依赖不变，则不会重新构建依赖，依靠当下浏览器支持了 esmodule，通过 script 写为 type="module"  即可使用浏览器 esm 的方式加载模块，当模块有更新时，浏览器会将更新的模块通过 websocket 发起请求，本地 koa 服务 获取到改动的模块后，再进行更新，可以理解为按需动态加载模块

注意：

vite 在打包阶段是采用 rollup 的方式，目的是减少 http 请求，优化生产代码。

vite 优势：

项目大，依赖多的时候，开发效率更高。

推荐一篇写的很清楚的文章：https://blog.csdn.net/weixin_30230009/article/details/123625544

推荐阅读官方文档：https://vitejs.bootcss.com/guide/why.html

其中对依赖预构建是这样说的：

对于依赖的处理，我们通常称为依赖预构建，Vite 使用 esbuild 来实现依赖预构建，将 CommonJS 和 UMD 的依赖库转为 ESM 形式，此外因为依赖库大多数时候不会变化，Vite 会将构建好的依赖存到 node_modules/.vite 目录中，如果依赖变化（package.json 等文件中依赖变化了）则会重新构建。

vite 快的原因：

而 Vite 这类基于浏览器 ESM 形式的构建工具，利用浏览器实现了按需加载，相比打包类型的构建工具快上很多，而且随着项目的增大，热更新等也不会变慢，大大提高了开发效率。

vite 为什么使用 rollup 打包

虽然浏览器对 ESM 的支持已经很广泛了，但 Vite 还是选择在生产环境时使用 rollup 来打包，因为在生产环境下，使用未打包的 ESM 会产生比较多的 HTTP 请求，相对打包而言，效率还是比较低下的，所以 Vite 上生产依旧打包，并使用了 tree-shaking、懒加载等技巧让上生产环境的代码更加优雅。

vite 最终目的

简单而言，Vite 对开发环境与生产环境提供了不同的解决方案，其最终目的是提高开发效率。

贴一些个人学习的简单梳理

 转载请注明出处：https://www.cnblogs.com/beileixinqing/p/16735190.html