浅谈webpack中的treeshking

用es6 静态引入

webpack.config.js

optimization:{
        usedExports:true
    }

package.json

"sideEffects":false

剔除不需要treeShaking的文件
比如

"sideEffects":['@babel/polyfill','*.css']

treeshking是减小打包的bundle size很重要的一个手段，但触发treeshking是有条件的，首先需要代码是es module规范的并且使用解构赋值的方式引入，第二要开启optimization.usedExports来标记使用和未使用的模块，第三是使用压缩的插件进行删除未使用代码。 webpack4的mode设置为production之后，我们只需要关心第一点就好了。

treeshking是有限制的，副作用的代码不能treeshking，只能对export进行treeshking。