本文简单聊聊webpack同vite的差异

众所周知，webpack是大部分项目的标配，而vite，更是后起之秀。原因在于vite的极速开发体验，一个字儿：快。vite是怎么做到的呢？
Webpack 是 “先打包再干活”，Vite 是 “边干活边打包”——Vite 快的本质，是跳过了 “全量打包” 的冗余步骤，只在需要时才处理文件。

  • 前者全量打包，后者按需编译，没有打包。vite利用浏览器能直接识别 ES Module（import/export）的特性，启动时只搭好服务器，不碰任何文件。浏览器要哪个文件，Vite 才去编译哪个，相当于 “按需开工”，启动速度自然秒级。注意，在开发环境下，vite是没有打包的动作的，这里的编译指的是把 “浏览器不认识的文件” 转成 “浏览器能认识的文件”，比如 TS→JS、Vue 组件→JS+CSS、Sass→CSS）。在生产环境中才会用rollup去打包
  • 编译工具的不同。前者用的babel，后者用的esbuild(go),比 JS 快 10-100 倍
  • 热更新。一旦代码改动，前者会编译打包变动部分，后者也是编译变化的那部分，但是没有打包的动作。

这三板斧下去，不快也难…