Webpack5优化的“双引擎”

一、代码分割：把“巨石包”切成“小切片”

1. SplitChunksPlugin：提取公共代码的“智能刀”

核心痛点：多个页面都引用了lodash，未分割时每个页面都打包一份，重复加载浪费流量。
配置方案：

javascript

// webpack.config.js module.exports = { optimization: { splitChunks: { chunks: 'all', // 对所有模块（同步+异步）进行分割 cacheGroups: { // 提取第三方库（如react、lodash） vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendors', // 生成单独的vendors.js priority: 10 // 优先级高于默认组 }, // 提取公共组件（被2个以上页面引用） common: { minChunks: 2, // 最少被2个chunk引用 name: 'common', priority: 5, reuseExistingChunk: true // 复用已有的chunk } } } } };

效果：lodash等第三方库被单独打包到vendors.js，各页面共享此文件，减少重复加载。

2. 动态导入：实现“按需加载”的路由懒加载

场景：单页应用中，用户访问首页时无需加载“个人中心”组件，通过动态导入实现“访问时才加载”。
Vue项目实战：

javascript

// router/index.js const UserCenter = () => import(/* webpackChunkName: "user" */ '../views/UserCenter.vue'); const routes = [ { path: '/user', component: UserCenter } // 访问/user时才加载user.js ];

魔法注释：/* webpackChunkName: "user" */指定分割后的文件名（默认是随机ID），便于调试。

3. 分割策略：避免“切得太碎”的反优化

常见陷阱：过度分割导致HTTP请求过多（如每个组件都分割成单独文件），反而拖慢加载速度。
最佳实践：

• 第三方库：单独打包（vendors.js）；

• 路由组件：按路由分割（每个路由对应一个chunk）；

• 公共组件：被2个以上路由引用时才提取（common.js）。

二、Tree Shaking：摇掉“未使用的代码”

1. 开启条件：ES模块+生产模式

核心原理：Tree Shaking依赖ES6模块的静态结构（import/export），Webpack在生产模式下会自动开启。
避坑配置：

javascript

// webpack.config.js module.exports = { mode: 'production', // 必须是生产模式 optimization: { usedExports: true // 标记未使用的导出，供TerserPlugin删除 } };

反面案例：使用require()（CommonJS模块）或import('xxx').then()（动态导入）会导致Tree Shaking失效，因为它们是动态的，Webpack无法静态分析。

2. 处理“副作用”：别让Tree Shaking误删有用代码

场景：utils.js中定义了formatDate函数，同时在全局添加了Array.prototype.myMethod（副作用），Tree Shaking可能误删整个文件。
解决方案：在package.json中标记副作用：

json

{ "sideEffects": [ "./src/utils.js", // 标记有副作用的文件，不进行Tree Shaking "*.css" // CSS文件通常有副作用（全局样式），需排除 ] }

原理：sideEffects: false表示所有文件无副作用，Webpack可安全删除未引用代码；数组形式则指定有副作用的文件。

3. 验证方法：查看打包后的代码

步骤：

1. 构建后打开dist/main.js，搜索未使用的函数名（如unusedFunction）；
2. 若未找到，说明Tree Shaking生效；若存在，检查是否：

   • 使用了CommonJS模块；

   • 未标记副作用；

   • 函数被间接引用（如window.fn = unusedFunction）。

三、组合优化：代码分割+Tree Shaking的“黄金搭档”

实战案例：Vue项目优化

优化前：

• 单个app.js体积8MB（含vue、vue-router、业务代码）；
• 首屏加载时间5秒。

优化步骤：

1. 代码分割：
   • 提取第三方库到vendors.js（3MB）；
   • 按路由分割业务代码（首页1MB，个人中心0.8MB）。
2. Tree Shaking：
   • 标记src/utils/中无副作用的文件；
   • 删除未使用的组件和工具函数（减少体积15%）。

优化后：

• 首屏加载仅需加载vendors.js（3MB）+ 首页chunk（1MB）；

• 首屏时间降至1.8秒，用户体验显著提升。

四、避坑总结：Webpack优化的“禁忌清单”