面試官:說說Webpack和Vite有哪些區(qū)別

更新時間：2026年04月03日 09:42:31 作者：404星球的貓

Vite基于ESM實現(xiàn)按需編譯,開發(fā)啟動和熱更新速度極快,Webpack采用全量打包,適合復雜項目但啟動較慢,這篇文章主要介紹了Webpack和Vite有哪些區(qū)別的相關(guān)資料,需要的朋友可以參考下

1. 第一次npm run dev

Webpack
公司老項目（約 4 萬行業(yè)務代碼 + Ant Design Pro）：
```
> webpack serve
95% emitting CompressionPlugin
```
冷啟動 38 s，M1 芯片 + SSD。
原因：
- 要解析 2 300 個模塊的依賴圖；
- ts-loader、babel-loader、eslint-loader 串行排隊；
- 每次新增文件，圖重新計算。
Vite
同一套代碼遷移到 Vite：
```
> vite
ready in 823 ms
```
預構(gòu)建依賴（esbuild 一次性把 lodash-es、antd 等打包成 ESM）只要 200 ms，剩下的模塊按瀏覽器請求懶編譯。

2. 熱更新（HMR）

Webpack
修改一個 Button 組件樣式：
- 觸發(fā) less-loader → css-loader → MiniCssExtractPlugin；
- 全量 diff 依賴圖，平均 2.8 s 瀏覽器才刷出來。
  如果改的是公共 util，時間飆到 6 s+。
Vite
只編譯改動的那 1 個 .vue 文件，esbuild 把 <style> 內(nèi)聯(lián)成 ESM，200 ms 內(nèi)瀏覽器收到更新。
實測：React 項目 300+ 路由頁，HMR 穩(wěn)定在 300 ms 內(nèi)。

3. 配置地獄

Webpack
為了兼容 IE11，我們寫了 160 行的 webpack.config.js：

module.exports = {
  entry: { main: ['core-js/stable', 'regenerator-runtime/runtime', './src/index.tsx'] },
  output: { publicPath: process.env.ASSET_PATH || '/' },
  module: {
    rules: [
      { test: /\.tsx?$/, use: ['babel-loader', 'eslint-loader'] },
      { test: /\.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader'] },
      { test: /\.(png|jpg|jpeg|gif|svg)$/, type: 'asset', parser: { dataUrlCondition: { maxSize: 8192 } } }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './public/index.html' }),
    new CompressionPlugin({ algorithm: 'gzip' })
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendors', priority: 10 }
      }
    }
  }
};

新人 2 天才能跑起來。

Vite

export default defineConfig({
  plugins: [react()],
  server: { port: 3000 },
  build: { outDir: 'dist' }
});

30 秒上手，剩下交給官方插件。

4. 生產(chǎn)構(gòu)建

Webpack
npm run build 跑 3 min 10 s，產(chǎn)物 4.2 MB（gzip 后 1.1 MB）。
- 需要手動配 SplitChunksPlugin、BundleAnalyzerPlugin 做體積優(yōu)化；
- 多入口時要做 runtimeChunk: 'single'，否則重復 polyfill 爆炸。
Vite
同一套代碼，Rollup 構(gòu)建 38 s，產(chǎn)物 3.8 MB（gzip 后 0.9 MB）。
- 默認 tree-shaking 更激進，Ant Design 的未使用組件直接消失；
- 動態(tài) import 自動拆包，無需手寫魔法注釋。

5. 兼容性

Webpack
能無痛打到 ES5，IE11 白屏率 < 1%。
代價：polyfill + 降級語法，打包體積 +25%。
Vite
開發(fā)階段默認只支持現(xiàn)代瀏覽器（ES2020+）。
需要 IE11 時：
- 裝 @vitejs/plugin-legacy；
- 會自動生成 legacy bundle + polyfill，構(gòu)建時間 + 40%，但 DX 仍比 Webpack 快。

6. 微前端/Module Federation

Webpack 5
我們主應用用 ModuleFederationPlugin 動態(tài)加載子應用：
```
new ModuleFederationPlugin({
  name: 'host',
  remotes: {
    marketing: 'marketing@http://localhost:3001/remoteEntry.js'
  }
})
```
子應用獨立部署，共享 React、antd，節(jié)省 300 KB 流量。
Vite 目前社區(qū)有 vite-plugin-federation，但功能、穩(wěn)定性還沒對齊 Webpack，復雜場景慎入。

7. 遷移成本

Webpack → Vite
我們 3 人 2 周把 70% 的子項目遷完：
- 把 webpack-dev-server 代理配置抄到 vite.config.ts；
- 把 file-loader/url-loader 換成 import.meta.glob；
- 遇到 CommonJS 老庫（如 moment）加 optimizeDeps.include 強制預構(gòu)建。
  遺留的 30%（Module Federation 子應用、低版本瀏覽器）繼續(xù)留在 Webpack。

一句話總結(jié)