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时,就会去掉这些灰色的节点(代码)