【易错求解】代码优化中经常说 tree-shaking，但是什么情况下 tree-shaking 会失效呢？

Question

问题描述

项目：vueCli@4、vue@2

目前已知一些必要条件

1. yarn build
2. lodash 不行，需要用 lodash-es。也就是产物需要支持
3. element-ui 需要使用 babel 做转义。

但是其实有时候还是会有一些代码没有被优化，不知道是什么因为原因

问题出现的环境背景及自己尝试过哪些方法

无

相关代码

无

你期待的结果是什么？实际看到的错误信息又是什么？

期望可以得到一个最佳实践

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 1

最佳实践:

• ​始终使用 ESM
• ​避免无意义的赋值
• ​使用 #pure 标注纯函数调用，避免副作用
• ​禁止 Babel 转译模块导入导出语句
• ​优化导出值的粒度
• ​使用支持 Tree Shaking 的包
• ​在异步模块中使用 Tree-Shaking

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 2

用 MutationObservers 监控对应的DOM节点也可以