📢 面试官快问快答：webpack VS vite

1、核心理念 — bundle与否

• webpack使用Node.js 编写的打包器从入口点开始逐步构建一个依赖图，然后将项目中所需的模块组合成一个或多个bundle文件，即逐级递归识别依赖，构建依赖图谱 ；

• vite无需进行bundle操作，源文件之间的依赖关系通过浏览器对ESM规范的支持来解析，将应用中的模块区分为 依赖(node_modules) 和 源码(项目代码) 两类；

  • 依赖：使用esbuild预构建，esbuild使用Go编写，比以Node.js编写的打包器预构建依赖快10-100倍；
  • 源码：在浏览器请求时按需转换并以原生ESM方式提供源码，让浏览器接管了打包程序的部分工作；

2、首屏、懒加载性能

• 由于webpack本身是经过了漫长的bundle过程，得到了一个完整的模块关系依赖包，所以不存在这两个方面的问题；

• 而vite由于unbundle机制，首屏、懒加载会存在一定的问题，处理时需要额外做以下工作：

  • 由于未对源文件做合并捆绑操作，导致大量的http请求；
  • 动态加载的文件需要对源文件进行转换操作：resolve、load、transform、parse；
  • 预构建、二次预构建操作也会阻塞首屏请求，直到预构建完成为止；
  • 但是由于缓存的存在，当第一次加载完成(预构建)之后，再次reload的时候性能会有较大的提升 ;

3、服务启动速度

• webpack需要先把所有的模块建立依赖关系打包成一个大文件，速度相对较慢；

• vite将应用中的模块区分为 依赖(node_modules) 和 源码(项目代码) 两类，进行预构建，速度会快很多；

  • 依赖：使用esbuild预构建，esbuild使用Go编写，比以Node.js编写的打包器预构建依赖快10-100倍；

    • 初次预构建完成后，会在node_modules中生成 .vite文件，后期不需要再次进行依赖的预构建；

  • 源码：在浏览器请求时按需转换并以原生ESM方式提供源码，让浏览器接管了打包程序的部分工作；

    • 由于是按需提供，所以在首屏、懒加载方面相比于webpack会存在一定的差异；

3、热更新速度

• webpack：

  • 编辑文件后将重新构建文件本身;
  • 显然我们不应该重新构建整个包，因为这样更新速度会随着应用体积增长而直线下降；
  • 所以打包器支持了动态模块热重载HMR(Hot Module Replacing)，而对页面其余部分没有影响，这较大的提升了开发体验；
  • 然而，在实践中发现即使是HMR，更新速度也会随着应用规模的增长而显著下降；

• vite：

  • 在vite中，HMR是在原生ESM上执行的，当编辑一个文件时，只需要精确地使已编辑的模块与其最近的 HMR边界之间的链失效(大多数时候只需要模块本身)，使HMR更新始终快速，无论应用的大小；

  • vite同时利用HTTP头来加速整个页面的重新加载(再次让浏览器为我们做更多事情)：

    • 源码模块的请求会根据304 Not Modified进行协商缓存；

    • 依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable进行强缓存;

4、prod环境打包区别

• webpack在生产环境的构建方面更加成熟，bundle整体形成完善的依赖关系，也有非常多的loader或者plugin可供选择；

• vite在生产环境的构建目前用的Rollup：

  • vite在生产环境，如果使用ESM会存在大量额外网络请求问题：

    • 尽管原生 ESM 现在得到了广泛支持，但由于嵌套导入会导致额外的网络往返，在生产环境中发布未打包的 ESM 仍然效率低下 ；
    • 最好的方式还是代码进行 tree-shaking、懒加载、和 chunk 分隔等；

  • 使用 rollup打包而不是速度惊人的esbuild，这是因为esbuild针对构建应用的重要功能仍然还在持续开发中 —— 特别是代码分割和css处理方面，rollup在应用打包方面更加的成熟且灵活；

  • 当未来这些功能稳定后，也不排除使用 esbuild 作为生产构建器的可能；

5、生态成熟度

• webpack拥有一个庞大的生态系统，有非常多优秀的loader和plugin可供选择(毕竟是老大哥)；
• vite生态成熟度目前不如webpack，但也在很大程度上满足常规开发所需，赶上也只是时间问题；

webpack 的第一次发布是在 2013 年发布，是长久以来主流的前端打包工具；

vite 的第一次发布是在 2021 年，重点解决webpack 在开发阶段的开发痛点；

截止 2023.4，webpack 的 Github Star 数 62.9k，刚发布两年的vite 的 Star 数是 54.9k，热度可见一斑；

总结：

vite 的核心理念就是借助浏览器原生 ES Modules 能力，当浏览器发出请求时，为浏览器按需提供 ES Module 文件，浏览器获取 ES Module 文件会直接执行，即使首次启动的预构建也是使用速度惊人的esbuild完成，虽然存在一些小的问题(例如：首屏、懒加载性能），但瑕不掩瑜，速度、效率、体验已非webpack可比，我自己在最近的项目工作中也是使用的vite(项目从0到1)，感觉nice。

当面试官问到这两个工程化工具之间的区别，大家可以从以上几个方面去聊一聊，理清思路、抓住重点、侃侃而谈，相信会为你的面试加分！

本篇文章主要用于个人学习理解webpack和vite之间的差异点，有不足之处，欢迎指出🍺🍺🍺

也欢迎大家多多探讨，共同进步！

优质文章参考：

1. 混乱是进步的阶梯 —— ESM规范的崛起【上】
2. 如果能重来，你要选 Vite 还是 Webpack ？
3. 【打包工具】- Vite 和 webpack 原理、优缺点对比
4. vite 相比webpack的优缺点
5. Vite和Webpack 优缺点对比
6. Vite 的好与坏
7. Vite和Webpack综合对比