Webpack优化实战：从配置到性能调优

大家好，我是蔓蔓。在大厂工作时，我负责过多个大型项目的Webpack配置和优化。今天我来和大家分享Webpack优化的实战技巧。

基础优化

合理配置mode

// webpack.config.js module.exports = { mode: process.env.NODE_ENV === 'production' ? 'production' : 'development' };

优化resolve配置

const path = require('path'); module.exports = { resolve: { // 配置路径别名 alias: { '@': path.resolve(__dirname, 'src'), '@components': path.resolve(__dirname, 'src/components'), '@utils': path.resolve(__dirname, 'src/utils') }, // 减少文件查找范围 extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'], // 配置模块查找路径 modules: [path.resolve(__dirname, 'node_modules')] } };

代码分割

入口分割

module.exports = { entry: { main: './src/main.js', vendor: ['react', 'react-dom', 'lodash'] }, optimization: { splitChunks: { chunks: 'all', cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendors', chunks: 'all' }, common: { name: 'common', minChunks: 2, chunks: 'all', priority: -10, reuseExistingChunk: true } } } } };

动态导入

// 按需加载组件 const Home = () => import(/* webpackChunkName: "home" */ './pages/Home'); const About = () => import(/* webpackChunkName: "about" */ './pages/About'); // 路由懒加载 const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ];

压缩优化

代码压缩

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

资源压缩

const CompressionPlugin = require('compression-webpack-plugin'); module.exports = { plugins: [ new CompressionPlugin({ algorithm: 'gzip', threshold: 8192, // 超过8KB的文件才压缩 minRatio: 0.8 // 压缩率低于80%才压缩 }) ] };

缓存策略

文件名哈希

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

模块缓存

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin'); module.exports = { plugins: [ new HardSourceWebpackPlugin() ] };

性能监控

速度分析

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin'); const smp = new SpeedMeasurePlugin(); module.exports = smp.wrap({ // webpack配置 });

体积分析

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { plugins: [ new BundleAnalyzerPlugin() ] };

进阶优化

Tree Shaking

module.exports = { optimization: { usedExports: true } }; // package.json { "sideEffects": false }

Scope Hoisting

module.exports = { optimization: { concatenateModules: true } };

懒加载图片

// 使用IntersectionObserver const lazyImages = document.querySelectorAll('img[data-src]'); const imageObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; imageObserver.unobserve(img); } }); }); lazyImages.forEach(img => imageObserver.observe(img));

总结

Webpack优化是一个持续的过程，需要结合项目实际情况进行：

1. 合理配置代码分割和懒加载
2. 使用压缩和缓存策略
3. 监控构建速度和包体积
4. 利用Tree Shaking和Scope Hoisting

技术应当有温度，优化后的构建能提升开发和用户体验。