如何让 Tree Shaking 在 Webpack 4 中为 React 库“material-ui”工作？

Question

虽然我按照文档中解释的步骤（请参阅here）启用 Tree Shaking，但它似乎没有任何效果。我将Webpack 4 与ts-loader 一起用于TypeScript。有问题的图书馆是material-ui。在他们的文档（参见How to reduce the bundle size?）中，他们建议“直接从material-ui/ 导入以避免引入未使用的模块”，然后他们添加“这两个选项都应该是临时的，直到您向项目添加摇树功能。”。所以我认为 Tree Shaking 应该有一些效果。

要明确：他们建议像这样导入：

import RaisedButton from "material-ui/RaisedButton";

不是这样的：

import {RaisedButton} from "material-ui";

我做了什么：

• 仅使用 ES2015 模块语法（即导入和导出）。
• 在我的项目的package.json 文件中添加了一个"sideEffects":false 条目。并确保拼写正确。
• 在mode: "production" 中运行 Webpack，Webpack 4 允许使用它而不是 UglifyJsPlugin（“从 webpack 4 开始，这也可以通过“模式”配置选项轻松切换，设置为“生产”。”）

结果：没有。没有缩小尺寸。所以也许我做错了什么？

---

对于基准测试爱好者：这就是单个 RaisedButton 在捆绑包大小方面的成本。没有缩小（即生产模式）：

Initial (in mode "development"): 
1,63 MiB (No Material UI)

MuiThemeProvider
1,94 MiB -> +0,31 (`import {MuiThemeProvider} from "material-ui/styles";`)
1,92 MiB -> +0,29 (`import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';`)

RaisedButton
3,07 MiB -> +1,13 (`import {RaisedButton} from "material-ui";`)
2,03 MiB -> +0,09 (`import RaisedButton from "material-ui/RaisedButton";`)

并进行缩小（无压缩）：

Initial (in mode "production"):
284 KiB (No Material UI)

MuiThemeProvider
371 KiB -> +087 (`import {MuiThemeProvider} from "material-ui/styles";`)
367 KiB -> +077 (`import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';`)

RaisedButton
705 KiB -> +338 (`import {RaisedButton} from "material-ui";`)
400 KiB -> +033 (`import RaisedButton from "material-ui/RaisedButton";`)

并启用 Tree Shaking：

705 KiB (`import {RaisedButton} from "material-ui";`)
400 KiB (`import RaisedButton from "material-ui/RaisedButton";`)

即：完全没有效果。

Answer 1

正如@qx3 所写，我已经能够通过添加：

alias: { '@material-ui/core': '@material-ui/core/es' }

在我的 webpack 配置中。

注意“@”前缀和“/core”后缀以适应库的新命名。这个简单的小东西帮助我摆脱了一些字节，并使团队能够以完全符合 esm 的方式编写“@material-ui/core”导入。