Webpack 前端性能优化全攻略

1. 性能优化全景图

1.1 优化维度概览

1.2 优化效果指标

2. 构建速度优化

2.1 缓存策略

// webpack.config.js
module.exports = {
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename]
    }
  }
}

2.2 并行处理

const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
      parallel: true,
      terserOptions: {
        compress: true,
        mangle: true
      }
    })],
  }
}

2.3 减少构建范围

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
}

3. 输出质量优化

3.1 代码分割

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
}

3.2 Tree Shaking

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

3.3 压缩优化

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

module.exports = {
  optimization: {
    minimizer: [
      new CssMinimizerPlugin({
        minimizerOptions: {
          preset: [
            'default',
            {
              discardComments: { removeAll: true }
            }
          ]
        }
      })
    ]
  }
}

4. 运行时性能优化

4.1 懒加载

// React 示例
const LazyComponent = React.lazy(() => import('./LazyComponent'))

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  )
}

4.2 预加载

import(/* webpackPreload: true */ 'ChartingLibrary')

4.3 资源优化

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65
              },
              pngquant: {
                quality: [0.65, 0.90],
                speed: 4
              }
            }
          }
        ]
      }
    ]
  }
}

5. 高级优化策略

5.1 持久化缓存

module.exports = {
  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].js'
  }
}

5.2 模块联邦

// app1/webpack.config.js
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button'
      }
    })
  ]
}

// app2/webpack.config.js
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'app2',
      remotes: {
        app1: 'app1@http://localhost:3001/remoteEntry.js'
      }
    })
  ]
}

5.3 性能分析

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      reportFilename: 'report.html',
      openAnalyzer: false
    })
  ]
}

6. 优化效果验证

6.1 构建速度分析

# 安装 speed-measure-webpack-plugin
npm install --save-dev speed-measure-webpack-plugin

# 配置使用
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const smp = new SpeedMeasurePlugin()

module.exports = smp.wrap({
  // webpack 配置
})

6.2 性能监控

// 使用 web-vitals 监控核心性能指标
import { getCLS, getFID, getLCP } from 'web-vitals'

function sendToAnalytics(metric) {
  console.log(metric)
}

getCLS(sendToAnalytics)
getFID(sendToAnalytics)
getLCP(sendToAnalytics)

7. 最佳实践总结

7.1 优化策略

1. 构建速度：

   • 启用缓存
   • 并行处理
   • 减少构建范围

2. 输出质量：

   • 代码分割
   • Tree Shaking
   • 压缩优化

3. 运行时性能：

   • 懒加载
   • 预加载
   • 资源优化

7.2 持续优化

1. 定期分析：使用分析工具持续监控
2. 渐进式优化：逐步实施优化策略
3. 团队协作：建立优化规范和流程

8. 扩展阅读

• Webpack 官方文档
• Web 性能优化指南
• 前端性能优化实战

通过本文的系统讲解，开发者可以全面掌握 Webpack 性能优化的各项策略与技巧。建议结合实际项目需求，制定合理的优化方案，持续提升应用性能。