启用 usedexports 是 tree shaking 的关键前提,需配合 minimize 才能真正删除未使用导出;仅支持 es 模块,须精确导入且配合 sideeffects 声明副作用,验证时可通过注释标记确认分析是否生效。

直接在 Webpack 配置中开启 usedExports 即可启用基于导出使用情况的死代码分析,它是 Tree Shaking 的关键前提之一。
基础配置方式
该选项需配合代码压缩(minimize: true)才能真正移除未使用的导出。单独开启 usedExports 只会做标记,不会删代码。
- 在
webpack.config.js的optimization中显式设置:
module.exports = {
mode: 'development', // 开发模式下也可用,不依赖 production
optimization: {
usedExports: true, // 启用导出使用分析
minimize: true // 必须开启,否则不会删除未用导出
}
};
Webpack 5+ 默认在 mode: 'production' 下自动启用这两项,但若想在开发环境验证效果,需手动写明。
确保模块符合 ES 模块规范
usedExports 仅对 export / import 语法生效,CommonJS(require/module.exports)无法被静态分析,自然不参与 Tree Shaking。
- 导出必须是具名或默认导出,且不能动态生成(如
export const obj = {}后再赋值属性) - 导入要精确引用,避免
import * as utils from './utils'—— 这会让所有导出都被视为“已使用” - 推荐写法:
import { formatTime } from './date.js'或import formatTime from './date.js'(对应 default export)
配合 sideEffects 控制副作用模块
即使某个模块的导出没被引用,如果它有副作用(如执行全局样式注入、修改原型),Webpack 默认保留整个模块。这时需通过 sideEffects 显式声明。
- 在
package.json中设为false:表示项目内所有模块都无副作用,未引用的导出可安全剔除 - 设为数组(如
["*.css", "*.scss"]):仅保留匹配文件的副作用,其他 JS 模块仍可被摇掉 - 注意:CSS 文件本身不支持内部 Tree Shaking(比如未用的 CSS 类名),
sideEffects只控制“是否引入该文件”,不处理文件内部内容
验证是否生效
最直观的方式是关闭压缩后查看打包产物:
- 先临时禁用
minimize,保留usedExports: true,然后构建 - 打开生成的 JS 文件,搜索未使用的函数或变量名 —— 若仍存在,说明未被标记;若变成
/* unused export xxx */注释,则分析已生效 - 再开启
minimize,这些标记部分就会被 TerserPlugin 真正删除
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











