webpack 之,17 优化配置 之 tree shaking

开发和生产环境皆可

tree shaking:去除无用代码

前提: 1.必须使用es6模块 2.开启production环境

作用:减少代码体积

在package.json中配置

"sideEffects":false 所有代码都没有副作用(都可以进行tree shaking)

问题: 可能会把css / @babel/polyfill (副作用文件干掉)

'sideEffects":["*.css","*.less"] 这样就可以避免css不会被tree shaking

就像没个代码就行是一棵树上的节点,每被使用的方法 就是灰色的(没有任何地方调用,只是写了),那么webpack时,就会去掉这些灰色的节点(代码)