16. webpack优化配置-tree shaking 剔除无用的代码

tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。

tree shaking只需注意下面的前提即可，无需其他配置。

前提： 1. 必须使用ES6模块化 2.webpack配置文件中的mode开启production环境

注意：package.json文件添加sideEffects配置来实现哪些文件需要进行tree shaking。

• “sideEffects”:false 所有代码都可以进行tree shaking，css文件可能直接被删除。
• “sideEffects”:["*.css"] 即css文件不要进行tree shaking

1. 入口文件index.js中引入其他文件

   import '../css/iconfont.css';
   import '../css/common.css';
   import '../less/base.less';
   import './base.js';
   

2. 在base.js文件中输入以下代码

   const add = (x, y) => x + y;
   add(2, 5);
   
   function mul(a, b) {
         
         
     return a - b;
   }
   

3. webpack配置文件webpack.config.js需要将mode设置为production，其他根据自己需求配置

   module.exports = {
         
         
   	mode: 'production',
   	....
   }
   

4. 打包后base.js文件中的mul()方法将被剔除

   webpack