webpack - 如何让 Tree Shaking 在 React 库 "material-ui"的 Webpack 4 中工作？

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 条目。并确保拼写正确。
• 以模式:“生产”运行 Webpack，Webpack 4 允许使用该模式来代替 UglifyJsPlugin(“从 webpack 4 开始，这也可以通过“mode”配置选项，设置为“生产”。”)

结果:什么也没有。尺寸没有减小。那么也许我做错了什么？

<小时/>

对于基准测试爱好者:这就是单个 RaishedButton 在 bundle 大小方面的成本。没有缩小(即生产模式):

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”导入。