理解:Tree Shaking就是对于哪些没有使用的js就不打包
(https://webpack.js.org/guides/tree-shaking/)
注意:Tree Shaking只支持ES Module语法(即通过import引入 export导出).
项目结构
webpack-demo
|- /dist
|- bundle.js
|- index.html
|- /node_modules
|- /src
|- index.js
+ |- math.js
|- package.json
|- webpack.config.js
mian.js
export function square(x){
console.log(x*x);
}
export function cube(x){
console.log(x+x);
}
index.js中引入
import {square} from './main.js'
square(2);
说明这时我们只使用了square方法，故意不使用cube方法然后让Tree Shaking删除它.
webpack.config.js添加
optimization: {
usedExports: true
}
注意：在mode为development模式下是不起作用的，应该在开发过程中是要不断调试代码的;在生产环境下打包你会发现cube方法已经不见了,这是Tree Shaking起了作用.
