Webpack 前端性能优化全攻略

在这里插入图片描述

文章目录

- 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)