Tree Shaking

【优化方向，节省空间】

1、在引入的模块中只打包使用过的方法。例如在模块A中导出add，reduce两个方法，在模块B中使用impor {add} from './A'，webpack默认会打包模块A中所有的导出的方法。

2、只针对ES module才有效，原因是ES Module静态引入的方式，而Common.js Module使用的是动态引入。

注解：import 是静态加载只有在用到的时候才会去加载，而 require 只要声明了就会加载。【webpack 遇到了 require 就会把它当成一个模块加载到 bundle 的依赖里】

配置方法

1.1、如果mode是development，则需要配置optimization(n.最优化)。

1.2、如果mode是production，则不需要配置，webpack会自动执行默认的优化操作。

2、设置usedExports：true

optimization: {
    usedExports: true
}

3、 package.json中的配置 sideEffects配置为false时表示不针对任何额外的文件。

sideEffects配置数组时，忽略一些文件，不使用Tree Shaking功能。

sideEffects: ['*.css']

结尾的话

为了使得 tree-shaking 真正生效，引入资源时，仅仅引入需要的组件尤为重要