Webpack构建配置调整

Webpack构建配置调整实战优化

在前端项目中，Webpack构建配置的优化直接影响打包体积和构建速度。以下是几个可直接复用的优化策略。

1. SplitChunks配置优化

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\\\/](node_modules)[\\\\/]/,
          name: 'vendors',
          priority: 10
        },
        common: {
          minChunks: 2,
          name: 'common',
          priority: 5,
          chunks: 'all'
        }
      }
    }
  }
}

2. Tree Shaking配置

module.exports = {
  optimization: {
    usedExports: true,
    sideEffects: false
  },
  mode: 'production'
}

3. 构建缓存优化

module.exports = {
  cache: {
    type: 'filesystem',
    version: '1.0'
  }
}

4. 压缩配置调整

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
            drop_debugger: true
          }
        }
      })
    ]
  }
}

以上配置可将构建时间减少30-50%，打包体积降低20-40%。