面試官：說說 Webpack 和 Vite 的區(qū)別

按“真實(shí)項(xiàng)目里踩過的坑”來回答，分 7 個場景

1. 第一次npm run dev

• Webpack
  公司老項(xiàng)目（約 4 萬行業(yè)務(wù)代碼 + Ant Design Pro）：

  > webpack serve
  95% emitting CompressionPlugin

  冷啟動 38 s，M1 芯片 + SSD。
  原因：

  • 要解析 2 300 個模塊的依賴圖；
  • ts-loader、babel-loader、eslint-loader 串行排隊(duì)；
  • 每次新增文件，圖重新計(jì)算。

• Vite
  同一套代碼遷移到 Vite：

  > vite
  ready in 823 ms

  預(yù)構(gòu)建依賴（esbuild 一次性把 lodash-es、antd 等打包成 ESM）只要 200 ms，剩下的模塊按瀏覽器請求懶編譯。

2. 熱更新（HMR）

• Webpack
  修改一個 Button 組件樣式：

  • 觸發(fā) less-loader → css-loader → MiniCssExtractPlugin；
  • 全量 diff 依賴圖，平均 2.8 s 瀏覽器才刷出來。
    如果改的是公共 util，時(shí)間飆到 6 s+。

• Vite
  只編譯改動的那 1 個 .vue 文件，esbuild 把 <style> 內(nèi)聯(lián)成 ESM，200 ms 內(nèi)瀏覽器收到更新。
  實(shí)測：React 項(xiàng)目 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)化；
  • 多入口時(shí)要做 runtimeChunk: 'single'，否則重復(fù) polyfill 爆炸。

• Vite
  同一套代碼，Rollup 構(gòu)建 38 s，產(chǎn)物 3.8 MB（gzip 后 0.9 MB）。

  • 默認(rèn) tree-shaking 更激進(jìn)，Ant Design 的未使用組件直接消失；
  • 動態(tài) import 自動拆包，無需手寫魔法注釋。

5. 兼容性

• Webpack
  能無痛打到 ES5，IE11 白屏率 < 1%。
  代價(jià)：polyfill + 降級語法，打包體積 +25%。

• Vite
  開發(fā)階段默認(rèn)只支持現(xiàn)代瀏覽器（ES2020+）。
  需要 IE11 時(shí)：

  • 裝 @vitejs/plugin-legacy；
  • 會自動生成 legacy bundle + polyfill，構(gòu)建時(shí)間 + 40%，但 DX 仍比 Webpack 快。

6. 微前端/Module Federation

• Webpack 5
  我們主應(yīng)用用 ModuleFederationPlugin 動態(tài)加載子應(yīng)用：

  new ModuleFederationPlugin({
    name: 'host',
    remotes: {
      marketing: 'marketing@http://localhost:3001/remoteEntry.js'
    }
  })

  子應(yīng)用獨(dú)立部署，共享 React、antd，節(jié)省 300 KB 流量。
  Vite 目前社區(qū)有 vite-plugin-federation，但功能、穩(wěn)定性還沒對齊 Webpack，復(fù)雜場景慎入。

7. 遷移成本

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

一句話總結(jié)

• 新項(xiàng)目、小團(tuán)隊(duì)、追求開發(fā)效率 → 直接上 Vite。
• 要 IE11、Module Federation、超大型 monorepo → 繼續(xù) Webpack，或兩者并存：主應(yīng)用 Webpack，子應(yīng)用 Vite。

到此這篇關(guān)于Webpack和Vite有哪些區(qū)別的文章就介紹到這了,更多相關(guān)Webpack和Vite區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論