webpack如何实现tree-shaking

35 阅读1分钟

中文文档:webpack.docschina.org/guides/tree…

是什么?

tree-shaking 就是让没有用到的 JS 代码不打包,以减小包的体积。

怎么做?

1. 怎么删

a. 使用 ES Modules 语法(即 ES6 的 import 和 export 关键字)
b. CommonJS 语法无法 tree-shaking(即 require 和 exports 语法)
c. 引入的时候只引用需要的模块
i. 要写 import {cloneDeep} from 'lodash-es' 因为方便 tree-shaking
ii. 不要写 import _ from 'lodash' 因为会导致无法 tree-shaking 无用模块

2. 怎么不删:在 package.json 中配置 sideEffects,防止某些文件被删掉

a. 比如我 import 了 x.js,而 x.js 只是添加了 window.x 属性,那么 x.js 就要放到sideEffects 里
b. 比如所有被 import 的 CSS 都要放在 sideEffects 里

3. 怎么开启:在 webpack config 中将 mode 设置为 production(开发环境没必要tree-shaking)

a. mode: production 给 webpack 加了非常多优化。

参考:github.com/webpack/web…