Webpack 优化到底该怎么做？10 个实战技巧你都掌握了吗？

在当今前端工程化开发中，Webpack作为模块打包工具的扛鼎之作，其性能优化直接关系到项目的构建效率和用户体验。但面对庞杂的配置项和日新月异的生态体系，80%的开发者都曾陷入过”打包体积膨胀、构建速度缓慢、重复代码冗余”的困境。本文将用10个经过验证的实战技巧，带您系统攻克Webpack优化难题。

通过安装webpack-bundle-analyzer插件生成可视化报告：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  plugins: [new BundleAnalyzerPlugin()]
}

分析结果可直观显示：重复依赖包、未压缩资源、超大模块，帮助针对性优化。

在optimization中配置智能拆包：

optimization: {
  splitChunks: {
    chunks: 'all',
    minSize: 20000,
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: 到10
      }
    }
  }
}

按模块路径、使用频率、更新频率三个维度进行精细化拆包。

确保实现真正的dead code elimination：

设置mode为production自动启用优化
使用ES6模块语法（避免CommonJS）
在package.json中添加“sideEffects”: false

通过多级缓存提升二次构建速度：

output: {
  filename: '[name].[contenthash:8].js'
},
module: {
  rules: [{
    test: /\.js$/,
    use: ['cache-loader', 'babel-loader']
  }]
}

利用硬件多核优势加速构建：

module: {
  rules: [{
    test: /\.js$/,
    use: [
      {
        loader: 'thread-loader',
        options: { workers: 4 }
      },
      'babel-loader'
    ]
  }]
}

按需加载非首屏资源：

// 路由级拆分
const ProductList = () => import('./views/ProductList.vue')

在模块联邦方案中避免重复打包：

new ModuleFederationPlugin({
  name: 'app1',
  filename: 'remoteEntry.js',
  exposes: { './Button': './src/Button' },
  shared: ['react', 'react-dom']
})

使用externals排除已CDN加载的库
moment.js替换为day.js（体积减少67%）
lodash按需引入：import cloneDeep from ‘lodash/cloneDeep’

通过webpack-merge管理多环境配置：

const { merge } = require('webpack-merge');
module.exports = (env) => {
  const baseConfig = require('./webpack.base');
  return merge(baseConfig, require(`./webpack.${env.mode}`));
}

建立性能监控体系：