webpack之Tree Shaking详解

Tree Shaking

能够在模块的层面上做到打包后的代码只包含被引用并被执行的模块，而不被引用或不被执行的模块被删除掉，以起到减包的效果。

比如

math.js

export const add = (a, b) => {
    console.log(a + b)
}

export const minus = (a, b) => {
    console.log(a - b)
}

index.js

import {add} from './math'

add(1, 6);

如果在index.js中只引入了math.js的add方法，使用tree shaking打包时就会只加载add方法，而不会加载minus方法
如果mode为development模式，则需要以下配置。webpack.config.js下

optimization: { // 在mode: 'development'配置Tree Shaking
    // production下不需要
    usedExports: true
}

package.json下的配置，[ ] 中为tree shaking忽略的文件 

"sideEffects": [
    "@babel/polly-fill",
    "*.css"
]