你这篇文章基本已经过时了。比如现在 webpack 用的不是 uglyfy plugin ，而是 terser plugin 。

只要你用到的库是 esm 而且 sideEffects: false ，tree shaking 就会正常工作。参考 material-ui ，代码结构就是这个文章所说的那种格式，不需要任何配置就支持 tree shaking 。

那种 babel 转换插件是 webpack 支持 tree shaking 之前存在的优化技巧，现在完全不需要这样的东西。

只有没有提供 esm 的库不支持 tree shaking ，比如 lodash 。这种情况你就必须手动 import 相应函数比如 'lodash/map'，或者使用 babel-plugin-lodash ，更好的方法是使用 webpack alias 替换成 lodash-es 等支持 esm 的库。

推荐阅读最新版本的官方文档
https://webpack.js.org/guides/tree-shaking/

一楼说的很全了 像 lodash 这种 如果你不用 lodash-es 那就需要用 plugin
如果 package 提供了 esm 并且提供了 sideEffect flag 的话 就都可以自动 tree-shaking 了
而且 webpack5 连非纯 esm 的 bundle 都可以做一定的 tree-shaking 了

但是你用自己内部做的包 很可能就不能自动 tree-shaking （除非特别处理）
这也是我经历过抱怨和误解最多的时候
因为要支持 tree-shaking 必须提供 esm 和 sideEffect 的信息
很多人做内部的包很喜欢把所有的东西用 index 全部导出来 但是有不知道怎么声明 sideEffect
或者用 webpack 或者其他 bundle 打包成了一个文件 cjs/umd 或者 单个 esm （就是把所有文件合并后导出成一个 esm ） 结果都没办法 tree-shaking 导致整个包全部被 webpack 打包

作为 library 想支持 tree-shaking
1. package.json 要提供 module 或者 browser 的 esm 入口 或者 exports
2. 不打包成一个文件 最好只做 babel 或者 tsc 就够了 最多用 rollup 分组件打包
3. 声明 sideEffect false 或者 指定需要 sideEffect 的文件
在使用 library 的时候 webpack 需要用 mode: production 并且启动了 minimize 和 TerserPlugin 才能充分使用 tree-shaking

虽然现在 webpack 和 esm 已经出来很久了
但是浏览器和 nodejs 的支持还是不是很完美
这个只能自己花时间 或者培训团队了