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

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 Shakingmodule.exports { optimization: { usedExports: true } }; // package.json { sideEffects: false }Scope Hoistingmodule.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优化是一个持续的过程需要结合项目实际情况进行合理配置代码分割和懒加载使用压缩和缓存策略监控构建速度和包体积利用Tree Shaking和Scope Hoisting技术应当有温度优化后的构建能提升开发和用户体验。