Webpack 前端性能优化全攻略

news2025/3/18 5:50:52

在这里插入图片描述

文章目录

- 1. 性能优化全景图
- - 1.1 优化维度概览
  - 1.2 优化效果指标
- 2. 构建速度优化
- - 2.1 缓存策略
  - 2.2 并行处理
  - 2.3 减少构建范围
- 3. 输出质量优化
- - 3.1 代码分割
  - 3.2 Tree Shaking
  - 3.3 压缩优化
- 4. 运行时性能优化
- - 4.1 懒加载
  - 4.2 预加载
  - 4.3 资源优化
- 5. 高级优化策略
- - 5.1 持久化缓存
  - 5.2 模块联邦
  - 5.3 性能分析
- 6. 优化效果验证
- - 6.1 构建速度分析
  - 6.2 性能监控
- 7. 最佳实践总结
- - 7.1 优化策略
  - 7.2 持续优化
- 8. 扩展阅读

1. 性能优化全景图

1.1 优化维度概览

1.2 优化效果指标

优化项	优化前	优化后	提升
构建时间	120s	40s	66.7%
首屏加载	4.5s	1.8s	60%
打包体积	5.2MB	1.8MB	65.4%

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)