面试官：说说 Webpack 和 Vite 的区别

按"真实项目里踩过的坑"来回答，分 7 个场景

1. 第一次 `npm run dev`

Webpack

公司老项目（约 4 万行业务代码 + Ant Design Pro）：
shell 复制代码
```
> webpack serve
95% emitting CompressionPlugin
```
冷启动 38 s，M1 芯片 + SSD。

原因：
- 要解析 2 300 个模块的依赖图；
- ts-loader、babel-loader、eslint-loader 串行排队；
- 每次新增文件，图重新计算。
Vite

同一套代码迁移到 Vite：
arduino 复制代码
```
> vite
ready in 823 ms
```
预构建依赖（esbuild 一次性把 lodash-es、antd 等打包成 ESM）只要 200 ms，剩下的模块按浏览器请求懒编译。

2. 热更新（HMR）

Webpack

修改一个 Button 组件样式：
- 触发 less-loader → css-loader → MiniCssExtractPlugin；
- 全量 diff 依赖图，平均 2.8 s 浏览器才刷出来。
  如果改的是公共 util，时间飙到 6 s+。
Vite

只编译改动的那 1 个 .vue 文件，esbuild 把 <style> 内联成 ESM，200 ms 内浏览器收到更新。

实测：React 项目 300+ 路由页，HMR 稳定在 300 ms 内。

3. 配置地狱

Webpack

为了兼容 IE11，我们写了 160 行的 webpack.config.js：

css 复制代码

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

php 复制代码

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

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

4. 生产构建

Webpack
npm run build 跑 3 min 10 s，产物 4.2 MB（gzip 后 1.1 MB）。
- 需要手动配 SplitChunksPlugin、BundleAnalyzerPlugin 做体积优化；
- 多入口时要做 runtimeChunk: 'single'，否则重复 polyfill 爆炸。
Vite

同一套代码，Rollup 构建 38 s，产物 3.8 MB（gzip 后 0.9 MB）。
- 默认 tree-shaking 更激进，Ant Design 的未使用组件直接消失；
- 动态 import 自动拆包，无需手写魔法注释。

5. 兼容性

Webpack

能无痛打到 ES5，IE11 白屏率 < 1%。

代价：polyfill + 降级语法，打包体积 +25%。
Vite

开发阶段默认只支持现代浏览器（ES2020+）。

需要 IE11 时：
- 装 @vitejs/plugin-legacy；
- 会自动生成 legacy bundle + polyfill，构建时间 + 40%，但 DX 仍比 Webpack 快。

6. 微前端/Module Federation

Webpack 5
我们主应用用 ModuleFederationPlugin 动态加载子应用：
css 复制代码
```
new ModuleFederationPlugin({
  name: 'host',
  remotes: {
    marketing: 'marketing@http://localhost:3001/remoteEntry.js'
  }
})
```
子应用独立部署，共享 React、antd，节省 300 KB 流量。
Vite 目前社区有 vite-plugin-federation，但功能、稳定性还没对齐 Webpack，复杂场景慎入。

7. 迁移成本

Webpack → Vite
我们 3 人 2 周把 70% 的子项目迁完：
- 把 webpack-dev-server 代理配置抄到 vite.config.ts；
- 把 file-loader/url-loader 换成 import.meta.glob；
- 遇到 CommonJS 老库（如 moment）加 optimizeDeps.include 强制预构建。
  遗留的 30%（Module Federation 子应用、低版本浏览器）继续留在 Webpack。

一句话总结

新项目、小团队、追求开发效率 → 直接上 Vite。
要 IE11、Module Federation、超大型 monorepo → 继续 Webpack，或两者并存：主应用 Webpack，子应用 Vite。

面试官：说说 Webpack 和 Vite 的区别

1. 第一次 npm run dev

2. 热更新（HMR）

3. 配置地狱

4. 生产构建

5. 兼容性

6. 微前端/Module Federation

7. 迁移成本

1. 第一次 `npm run dev`