webpack/vite 代码压缩、Tree Shaking、按需加载、Polyfill

我将从四个部分对比说明 Webpack 与 Vite 的处理方式，并附实际代码示例：

---

一、代码压缩（Minification）

Webpack：
生产模式下自动启用，核心配置示例：

// webpack.config.js
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
      parallel: true,
      extractComments: false, // 不提取注释
    })],
  },
}

Vite：
默认集成 Rollup 的 terser，简化配置：

// vite.config.js
export default defineConfig({
  build: {
    minify: 'terser', // 可选 'esbuild'（默认更快）
    terserOptions: {
      compress: {
        drop_console: true // 移除console
      }
    }
  }
})

---

二、Tree Shaking

共同前提： 使用 ES Module 格式（import/export）

Webpack：
需要确保 package.json 有：

"sideEffects": false // 或指定有副作用的文件数组

典型场景：

// 入口文件
import { funcA } from './utils'
funcA();

// utils.js中被其他模块未引用的代码会被shaking

Vite：
基于 Rollup 的内置优化，原生支持 ES 模块：

import { merge } from 'lodash-es' // 必须使用ES模块格式

需要确认第三方库是否提供 ES 版本（如lodash-es）

---

三、按需加载（Dynamic Import）

Webpack：
需要配置 @babel/plugin-syntax-dynamic-import

// React组件动态加载
const Dashboard = React.lazy(() => import('./Dashboard'));

// 手动实现代码分割（适用于路由）
import(/* webpackChunkName: "login" */ './Login')
  .then(module => { /* ... */ });

Vite：
原生支持动态导入，无额外配置：

// 基于路由的分割（Vue示例）
const routes = [
  {
    path: '/dashboard',
    component: () => import('./views/Dashboard.vue')
  }
]

---

四、Polyfill 处理

Webpack：
传统方案需配置 Babel + core-js：

1. 安装依赖：

npm install core-js @babel/preset-env @babel/plugin-transform-runtime

2. .babelrc：

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}

Vite：
现代方案：

// vite.config.js
import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
      polyfills: ['es.promise', 'es.array.iterator']
    })
  ]
})

自动生成两版构建产物：现代版本 + legacy 版本（带polyfills）

---

典型综合示例（按需加载+polyfill）

Ant Design 组件库优化：

Webpack 方案：

// 配置 babel-plugin-import
{
  plugins: [
    ['import', {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: 'css'
    }]
  ]
}

Vite 方案：

// vite.config.js
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    Components({
      resolvers: [AntDesignVueResolver()],
    }),
  ]
})

---

总结对比矩阵

特性	Webpack	Vite
构建速度	慢（全量构建）	快（ESM预构建）
压缩方案	TerserPlugin	默认terser（可选esbuild）
Tree Shaking	需手工标记sideEffects	原生ESM自动优化
Polyfill	Babel + core-js手动配置	通过legacy插件自动生成
按需加载	需动态导入语法支持	原生支持动态导入

最佳实践：

• 新项目首选 Vite + ES 模块规范
• 旧项目过渡考虑 Webpack 的增量升级
• 现代浏览器覆盖率高的场景可关闭polyfill