如何实现tree-shaking？

是什么

tree-shaking 就是让没有用到的 JS 代码不打包，以减少包的体积。

怎么做

1. 怎么删

   • 使用 ES Module 语法（即 ES6 的 import 和 export 关键字）
   • CommonJS 语法无法使用tree-shaking（即 require 和 exports 语法）
   • 引入的时候只引用需要的模块
     • 要写 import { cloneDeep } from 'lodash-es' 因为方便 tree-shaking
     • 不要写 import _ from 'lodash' 因为会导致无法

2. 怎么不删：在 package.json 中添加 sideEffects 字段，防止某些文件被删除

   • 比如 import x.js，而 x.js 中只是添加的 window.x 属性，那么 x.js 就要放到 sideEffects 中
   • 比如所有被 import 的CSS都要放在 sideEffects 里
   • 怎么开启：在 webpack.config.js 中将 mode 字段，设置 production（开发环境没必要tree-shaking）
     • mode: 'production' 给 webpack 加了非常多优化

参考链接

• tree-shaking | webpack
• tree-shaking | webpack 中文文档