面试官:说说Webpack和Vite有哪些区别

Vite基于ESM实现按需编译,开发启动和热更新速度极快,Webpack采用全量打包,适合复杂项目但启动较慢,这篇文章主要介绍了Webpack和Vite有哪些区别的相关资料,需要的朋友可以参考下

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

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

1. 第一次npm run dev

• Webpack
  公司老项目（约 4 万行业务代码 + 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

  预构建依赖（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：

  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. 生产构建

• 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 动态加载子应用：

  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有哪些区别的文章就介绍到这了,更多相关Webpack和Vite区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

• 浅谈vite和webpack的性能优化和区别
• 前端构建工具Webpack、Vite区别有哪些
• Webpack和Vite的区别小结