Tree Shanking

为什么要用tree shanking

首先看这一段代码：
main.js输出两个函数

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

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

index.js使用

import { add } from './main';

console.log(add(5,6))//正常输出11

如果不做任何其它的配置，引入main.js的时候，会把一些没有用到的东西都引入进来，详细请看打包之后的文件

但是实际上我们先要的效果肯定是用到的东西才需要引进来，这里就有了tree shanking的概念

使用：

webpack.config.js

      optimization: {
        usedExports:true,
    },

这样就可以了~~~

优化

这里可能会带一些新的问题，如果是项目引入@babel/polyfill
@babel/polyfill其实并没有引入任何东西的，他是在window对象中加上一些全局的配置；
如果使用了tree shanking ,babel/polyfill可能就不会有效果,这里要在package.json里配置
package.json

    "sideEffects":["@babel/polyfill"],

注意

tree shanking 只对ES module的语法有用
在production环境下，其实本来就有tree shanking,不用另外配置