tree-shaking
通常用来移除,代码中未被引用的代码,他依赖 es6的 import 和 export 语法,只有文件内的模块引用导出全是es6 语法才能使用
为什么依赖 es6的 import 和 export 呢?
动态结构
当前的JavaScript模块格式具有动态结构:在导入和导出的内容可以在运行时更改。
静态结构
这意味着您可以在编译时(静态地)确定导入和导出—只需查看源代码,不必执行它。并且ES6从语法上加强了这一点:您只能在顶层导入和导出(绝不能嵌套在条件语句中)。导入和导出语句没有动态部分(不允许有变量等)。
静态结构vs动态结构
消除没有引用的代码
导入是导出的只读视图,不必赋值导出,可以会直接引用他们
快速查找到对应的导出,es5导出的一版是一个对象,使用的时候需要通过属性查找
配置
将文件标记为无副作用,来触发webpack的tree-shaking
在package.json 中增加 " sideEffects" 字段
// 全部文件都无副作用
{
"name": "your-project",
"sideEffects": false
}
// 指定文件
{
"sideEffects": [
"./src/some-side-effectful-file.js"
]
}
// 在 webpack module.rules 中配置,可以用来按需导入
module.rules: [
{
include: path.resolve("node_modules", "lodash"),
sideEffects: false
}
]
结论
为了学会使用 tree shaking,你必须……
- 使用 ES2015 模块语法(即
import
和export
)。 - 在项目
package.json
文件中,添加一个 "sideEffects" 入口。 - 引入一个能够删除未引用代码(dead code)的压缩工具(minifier)(例如
UglifyJSPlugin
)