关于Tree Shaking 的相关文章


一、必须使用 ES6 的 import/export 模块机制。

其实整个深作用域分析都是基于 ES6 模块完成的,也就是说深作用域分析无法分析 CommonJS 和 AMD 等等模块规范。这个时候,就要求项目中引用的模块都遵循 ES6 的规范,比如使用 lodash-es 代替 lodash。另外就是要注意 babel-loader 和 TypeScript 的设置,是否会把代码转换到 ES5 语法,导致深作用域分析失效。

二、学会使用 PURE 注释。

由于 JS 语法的复杂程度,webpack 没有打算给 JS 实现数据流分析,所以插件是无法知道一个函数调用是否具有副作用的。所以对于一些导出模块,如果是纯的函数调用,则需要加上 /*@__PURE__*/注释来表明这个函数是 pure 的,这是 Uglify 使用的方法。当然也可以使用相关的 babel 插件进行批量添加。



参考:https://diverse.space/2018/05/better-tree-shaking-with-scope-analysis

https://juejin.im/post/5a5652d8f265da3e497ff3de

确认 取消