tree shaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。
tree shaking只需注意下面的前提即可,无需其他配置。
前提: 1. 必须使用ES6模块化 2.webpack配置文件中的mode开启production环境
注意:package.json文件添加sideEffects配置来实现哪些文件需要进行tree shaking。
- “sideEffects”:false 所有代码都可以进行tree shaking,css文件可能直接被删除。
- “sideEffects”:["*.css"] 即css文件不要进行tree shaking
-
入口文件index.js中引入其他文件
import '../css/iconfont.css'; import '../css/common.css'; import '../less/base.less'; import './base.js';
-
在base.js文件中输入以下代码
const add = (x, y) => x + y; add(2, 5); function mul(a, b) { return a - b; }
-
webpack配置文件webpack.config.js需要将mode设置为production,其他根据自己需求配置
module.exports = { mode: 'production', .... }
-
打包后base.js文件中的mul()方法将被剔除
webpack