Tree Shaking

理解: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起了作用.