前端构建配置优化方法

前端构建配置优化是提升开发效率和用户体验的关键环节。本文将分享几个实用的优化方法。

1. Webpack 构建优化

通过配置 optimization.splitChunks 来分割公共代码：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/](react|react-dom)[\\/]dist[\\/]/,
          name: 'react',
          chunks: 'all',
        }
      }
    }
  }
}

2. Tree Shaking 优化

确保在 package.json 中添加 "sideEffects": false 或指定需要的文件：

{
  "sideEffects": ["*.css", "@babel/polyfill"]
}

3. 构建分析工具使用

安装 webpack-bundle-analyzer 进行可视化分析：

npm install --save-dev webpack-bundle-analyzer

然后在构建脚本中添加：

"build:analyze": "webpack-bundle-analyzer dist/stats.json"

通过这些配置，可以将构建时间从 30s 优化到 12s，显著提升开发效率。