「这是我参与2022首次更文挑战的第21天，活动详情查看：2022首次更文挑战」

不知不觉，vite 已经诞生一年多了，在开发体验上受到了广大小伙伴们的喜爱。许多小伙伴可能有这样的疑惑 🤔：vite 的体验这么好，那它会不会替代 webpack 这位编译界的老大哥，而独霸一方呢？

Webpack 编译界老大哥

• 打包过程：
  • 入口 -> 依赖识别（逐层）-> 分析 + 转换 + 编译 + 输出 -> 打包完成
  • 代码变更 -> 需要整体重新编译打包
• 原理： 逐层识别依赖并绘制依赖关系图 -> 转为 AST 语法数 -> 分析 AST -> 编译为浏览器能够识别的代码
• 不足点：
  • 基于 NodeJS
  • 服务端启动比较慢
  • 热更新效率较低
  • 修改单个文件 -> 需要对整个项目进行重新打包构建
  • 项目工程规模约大，HMR 更新速度会越来越慢

Vite 编译届的一颗冉冉升起的新秀

• 无需打包，直接进入服务器端
• 原理：
  • 基于浏览器原生的 ES module，可以通过浏览器直接解析 import，只有在依赖被调用的时候，才会编译对应的依赖模块
  • 由于是基于 ES module，所以不能使用 CommonJS
  • 声明 script 标签类型为 module <script type="module" src="/src/main.js"></script>
  • 通过 http 请求，引入 main.js 文件中的 import 调用的模块
  • 在服务端对 import 的文件进行处理，在返回到客户端（即浏览器端）
• 技能点：
  • 应用模块分类 【 源码 + 依赖 】
  • esbuild 构建项目
  • 引入的源码按需引入
  • 构建依赖的速度比 nodeJS 要快（10 ～ 100 倍）
  • HMR 基于原生 ESM，项目工程的规模不会影响到代码更新的速度
  • http2 缓存 + 压缩
• 不足点：
  • 诞生时间较短，社区生态尚不完善
  • 对于 css 和代码分割，esbuild 显得不是那么地友好
  • 实践期较短，可能会有隐藏款bug

Vite & Webpack 编译大战持续进行中 —— 【 不要走决战到天明 】

• webpack 先编译打包后在进入服务器运行 + vite 直接进入服务器运行，只编译当前被引用到的依赖模块 => vite 的速度 >> webpack 的速度 （给你的开发带来丝滑般的体验）
• vite 需要借助 rollup 或 webpack 来打生产包 （关键时刻还得找老大哥坐镇）
• vite 不能使用 CommonJS, vite.config.js 文件除外

喝个咖啡，休息一下 ♨️

掌握 vite 这颗新星和 webpack 这个老将的特性，将其组合使用，或许会产生更多意想不到的惊喜呦！！！！！！成年人不做选择，vite 和 webpack 全都要！！！！！！