Hi，我是前端人类学！

Webpack 作为前端工程化领域最成熟的打包工具，至今仍是无数大型项目的构建基石。尽管 Vite 等新工具风头正劲，但 Webpack 在生产环境构建的稳定性和生态丰富度上依然不可撼动。然而，一个现实的问题是：很多团队用着 Webpack，却从未真正“用好”过它。

本文将带你系统性地对 Webpack5 进行性能调优，覆盖从开发体验到生产交付的完整链路。我们不堆砌配置，而是讲清楚每个优化手段背后的原理和适用场景，让你不仅会配，更懂为什么这样配。

一、项目环境准备

在开始调优之前，我们先搭建一个标准的 Webpack5 项目作为实验场。

mkdirwebpack-perf-demo&&cdwebpack-perf-demonpminit-ynpminstallwebpack webpack-cli webpack-dev-server --save-devnpminstallvue vue-router--save# 以 Vue3 为例

基础的目录结构：

src/ ├── main.js # 应用入口 ├── App.vue # 根组件 ├── pages/ # 路由页面 ├── components/ # UI 组件 ├── utils/ # 工具函数 └── vendor/ # 第三方库

基础webpack.config.js（仅展示核心配置，完整版可参考文末）：

constpath=require('path');const{VueLoaderPlugin}=require('vue-loader');module.exports={mode:'production',entry:'./src/main.js',output:{path:path.resolve(__dirname,'dist'),filename:'[name].[contenthash:8].js',clean:true,},module:{rules:[{test:/\.vue$/,loader:'vue-loader'},{test:/\.js$/,exclude:/node_modules/,use:'babel-loader'},],},plugins:[newVueLoaderPlugin()],};

有了这个基础盘，我们就可以依次展开各项调优了。

二、缓存体系 —— 让构建“快”起来，让加载“稳”下来

在开启分包之前，我们先从缓存入手，因为缓存是开发构建速度和二次访问速度的共同基础。

2.1 Webpack5 持久化缓存（提升构建速度）

Webpack5 最重磅的特性之一就是持久化缓存。在 Webpack4 中，每次构建都要重新处理所有模块，而 Webpack5 默认将构建缓存写入磁盘（node_modules/.cache/webpack），二次构建时只重新编译变更的部分。

module.exports={// 开启持久化缓存cache:{type:'filesystem',// 'memory' | 'filesystem'buildDependencies:{config:[__filename],// 当配置文件变化时，使缓存失效},},};

效果：开发环境二次启动速度提升50%~80%，生产构建也受益。

2.2 浏览器长效缓存（contenthash + runtimeChunk）

contenthash是 Webpack 实现浏览器缓存“精准命中”的关键。它的原理是：仅当文件内容变化时，hash 才变化。

output:{filename:'[name].[contenthash:8].js',chunkFilename:'[name].[contenthash:8].chunk.js',},

另外，将runtime代码（Webpack 运行时的模块加载逻辑）单独抽离，防止它污染业务代码的 hash：

optimization:{runtimeChunk:'single',// 或 true},

效果：当业务代码更新时，runtime和vendors的 hash 保持不变，用户只需下载变更的 chunk，缓存命中率大幅提升。

2.3 使用 cache-loader（已过时，但可作为补充）

在 Webpack5 之前，cache-loader被广泛用于缓存 loader 结果。Webpack5 的持久化缓存已经覆盖了这一功能，因此不再推荐单独使用 cache-loader。但对于某些昂贵的 loader（如babel-loader），可以开启其内置的缓存：

{test:/\.js$/,use:[{loader:'babel-loader',options:{cacheDirectory:true},},],}

三、Tree Shaking —— 让打包产物“斤斤计较”

Tree Shaking 的本质是静态分析 ES Module 的引用关系，移除未被引用的代码。Webpack5 在这方面做了大量增强。

3.1 确保使用 ES Module（关键前提）

Webpack 的 Tree Shaking 只对 ES Module（import/export）有效。如果你在代码中使用了require()，Tree Shaking 将无法生效。

// ✅ 会被 Tree Shaking 分析import{utilA}from'./utils';// ❌ 不会，commonjs 无法静态分析const{utilA}=require('./utils');

3.2 开启 optimization.sideEffects

sideEffects告知 Webpack 哪些文件包含副作用，从而安全地删除未使用的导出。在package.json中配置：

{"name":"my-app","sideEffects":false// 表示所有文件都无副作用，可以安全 Tree Shaking}

对于有副作用的文件（如polyfill、global.css），需要显式声明：

"sideEffects":["*.css","src/polyfill.js"]

在 Webpack 配置中同步开启：

optimization:{usedExports:true,// 标记未使用的导出sideEffects:true,// 利用 package.json 的 sideEffects},

3.3 深度作用域分析（Scope Hoisting）

Webpack5 默认开启concatenateModules，它会将多个模块合并到一个函数作用域中，减少函数声明开销并提升执行效率。

optimization:{concatenateModules:true,},

这个优化在 Webpack4 中对应ModuleConcatenationPlugin，Webpack5 已内置。

3.4 Babel 配置的注意事项

如果你使用 Babel，确保@babel/preset-env的modules选项为false，否则 Babel 会将 ES Module 转换为 CommonJS，破坏 Tree Shaking：

{"presets":[["@babel/preset-env",{"modules":false}]]}

效果：一个包含 50+ 工具函数的库，最终只打包了你用到的 3 个，体积减少60%~80%。

四、分包策略（SplitChunks）—— 精细控制代码分割

SplitChunks是 Webpack 中最强大也最复杂的配置，没有之一。它的核心思想是：将公共代码抽离成独立的 chunk，避免重复加载。

4.1 基础配置 —— 将 node_modules 抽离为 vendors

最简单的分包：

optimization:{splitChunks:{chunks:'all',cacheGroups:{vendors:{test:/[\\/]node_modules[\\/]/,name:'vendors',priority:10,},},},},

4.2 进阶配置 —— 精细化分包策略

一个成熟的分包策略应该是这样的：

optimization:{splitChunks:{chunks:'all',minSize:20000,// 20KB 以下的模块不单独拆分minChunks:1,// 被引用至少 1 次就考虑拆分maxAsyncRequests:30,// 按需加载时的最大并行请求数maxInitialRequests:30,// 入口的最大并行请求数cacheGroups:{// 1. 核心框架 —— 变更频率极低，适合长效缓存vue:{test:/[\\/]node_modules[\\/](vue|vue-router|pinia)[\\/]/,name:'framework',priority:40,chunks:'all',},// 2. UI 组件库 —— 体积大，单独拆分ui:{test:/[\\/]node_modules[\\/](element-plus|ant-design-vue)[\\/]/,name:'ui-vendor',priority:30,chunks:'all',},// 3. 其他 node_modulesvendors:{test:/[\\/]node_modules[\\/]/,name:'vendors',priority:20,chunks:'all',},// 4. 业务公共代码 —— 多个页面/组件共享的代码common:{minChunks:2,// 至少被 2 个 chunk 引用priority:10,name:'common',chunks:'all',reuseExistingChunk:true,},},},},

4.3 动态导入（按需加载）

对于路由级别的组件，使用动态导入实现按需加载：

// 路由配置constroutes=[{path:'/dashboard',component:()=>import(/* webpackChunkName: "dashboard" */'./views/Dashboard.vue'),},{path:'/settings',component:()=>import(/* webpackChunkName: "settings" */'./views/Settings.vue'),},];

/* webpackChunkName: "dashboard" */魔法注释可以自定义 chunk 名称。

效果：首屏只加载必要的代码，其他页面按需加载，首屏体积减少40%~60%。

五、代码压缩 —— 在体积和速度之间找平衡

压缩是生产构建的最后一步，也是影响构建时间的“大户”。Webpack5 在压缩方面提供了多种选择。

5.1 TerserWebpackPlugin —— 最稳定，但慢

Webpack5 默认使用terser-webpack-plugin（替代了 Webpack4 的uglify-js）。它支持 ES6+ 语法压缩，但速度偏慢。

constTerserPlugin=require('terser-webpack-plugin');module.exports={optimization:{minimize:true,minimizer:[newTerserPlugin({parallel:true,// 多进程并行terserOptions:{compress:{drop_console:true,// 移除 console.logdrop_debugger:true,},format:{comments:false,// 移除注释},},extractComments:false,// 不提取 license 注释到单独文件}),],},};

5.2 Esbuild 压缩 —— 极速，但压缩率略低

如果你更在意构建速度而非极致压缩率，可以使用esbuild作为压缩器：

npminstallesbuild-loader --save-dev

const{EsbuildPlugin}=require('esbuild-loader');module.exports={optimization:{minimizer:[newEsbuildPlugin({target:'es2015',css:true,minify:true,}),],},};

对比：

5.3 CSS 压缩

CSS 也需要压缩。使用CssMinimizerWebpackPlugin：

npminstallcss-minimizer-webpack-plugin --save-dev

constCssMinimizerPlugin=require('css-minimizer-webpack-plugin');module.exports={optimization:{minimizer:['...',// 保留默认的 JS 压缩器newCssMinimizerPlugin({parallel:true,minimizerOptions:{preset:['default',{discardComments:{removeAll:true}}],},}),],},};

六、CDN 部署与资源优化

CDN 是让静态资源“飞”起来的关键。

6.1 修改 publicPath

output:{publicPath:process.env.CDN_URL||'/',// 通过环境变量控制},

生产环境配置环境变量：

CDN_URL=https://cdn.example.com/npmrun build

6.2 使用 external 排除公共库

将vue、react、lodash等大型库通过 CDN 引入，不打包到 bundle 中：

module.exports={externals:{vue:'Vue','vue-router':'VueRouter',pinia:'Pinia',lodash:'_',},};

在 HTML 模板中手动引入 CDN 链接：

<scriptsrc="https://cdn.jsdelivr.net/npm/vue@3.4.0/dist/vue.global.prod.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/vue-router@4.2.0/dist/vue-router.global.prod.js"></script>

⚠️注意：external 会显著减小 bundle 体积，但需要确保 CDN 的可用性和版本一致性。

6.3 资源压缩与图片优化

• 使用image-webpack-loader对图片进行无损压缩
• 使用CompressionWebpackPlugin生成.gz文件，让 Nginx 直接返回压缩版本

npminstallcompression-webpack-plugin --save-dev

constCompressionPlugin=require('compression-webpack-plugin');module.exports={plugins:[newCompressionPlugin({test:/\.(js|css|html|svg)$/,threshold:10240,// 10KB 以上才压缩minRatio:0.8,}),],};

七、最终配置汇总

以下是一个整合了上述所有优化的完整webpack.config.js骨架（生产环境）：

constpath=require('path');const{VueLoaderPlugin}=require('vue-loader');constTerserPlugin=require('terser-webpack-plugin');constCssMinimizerPlugin=require('css-minimizer-webpack-plugin');constCompressionPlugin=require('compression-webpack-plugin');module.exports={mode:'production',entry:'./src/main.js',output:{path:path.resolve(__dirname,'dist'),filename:'[name].[contenthash:8].js',chunkFilename:'[name].[contenthash:8].chunk.js',publicPath:process.env.CDN_URL||'/',clean:true,},cache:{type:'filesystem',buildDependencies:{config:[__filename]},},module:{rules:[{test:/\.vue$/,loader:'vue-loader',},{test:/\.js$/,exclude:/node_modules/,use:[{loader:'babel-loader',options:{cacheDirectory:true},},],},],},plugins:[newVueLoaderPlugin(),newCompressionPlugin({test:/\.(js|css|html|svg)$/,threshold:10240,minRatio:0.8,}),],optimization:{runtimeChunk:'single',usedExports:true,sideEffects:true,concatenateModules:true,splitChunks:{chunks:'all',minSize:20000,minChunks:1,maxAsyncRequests:30,maxInitialRequests:30,cacheGroups:{framework:{test:/[\\/]node_modules[\\/](vue|vue-router|pinia)[\\/]/,name:'framework',priority:40,},vendors:{test:/[\\/]node_modules[\\/]/,name:'vendors',priority:20,},common:{minChunks:2,priority:10,name:'common',reuseExistingChunk:true,},},},minimize:true,minimizer:[newTerserPlugin({parallel:true,terserOptions:{compress:{drop_console:true,drop_debugger:true,},format:{comments:false},},extractComments:false,}),newCssMinimizerPlugin({parallel:true,minimizerOptions:{preset:['default',{discardComments:{removeAll:true}}],},}),],},externals:{vue:'Vue','vue-router':'VueRouter',pinia:'Pinia',},};

Webpack5 的性能调优是一个系统工程，不是简单堆砌插件就能解决的。关键在于理解每个优化手段的适用场景，并根据项目实际情况做出权衡：

• 开发环境：优先保证构建速度（缓存、Esbuild、减少压缩）
• 生产环境：优先保证产物质量（分包、Tree Shaking、CDN）
• CI 环境：平衡速度与质量，可适当牺牲压缩率换取构建时间