tree-shaking 是在打包的时候让没有用到的 JS 代码不打包,以减小包的体积
官方文档中有详细说明如何实现tree-shaking
总结如下:
- 怎么删
- 只能使用 ES Modules 语法(即 ES6 的 import 和 export )
 - CommonJS 语法无法 tree-shaking ( 即 require 和 exports )
- 可给 babel-loader 添加 
modules: false选项,阻止 CommonJS 
 - 可给 babel-loader 添加 
 - 引入的时候只引入需要的模块,不能引入所有,例如
- 要写 
import { cloneDeep } from 'lodash-es'因为方便 tree-shaking - 不要写 
import _ from 'lodash'因为会导致无法 tree-shaking 
 - 要写 
 
 - 怎么防止某些文件被删?在 package.json 中配置 sideEffects,添加要排除的文件路径
- 例如我 import 了 x.js, 而 x.js 只是添加了 window.x 属性,那么 x.js 就要放到 sideEffects 里
 - 例如所有被 import 的 CSS 都要放在 sideEffects
 
 - 怎么开启 tree-shaking ?
- 在 webpack confg 中将 mode 设置为 production (开发环境没必要 tree-shaking)
 
 
