如何让Tree Shaking在Webpack 4中使用React Library"material-ui"？

Question

虽然我按照文档(请参阅此处)中说明的步骤启用了Tree Shaking,但它似乎没有任何效果.我使用的是Webpack 4用ts-loader了TypeScript.有问题的图书馆是material-ui.在他们的文档中(请参阅如何减少捆绑包大小？),他们建议"直接导入material-ui/以避免拉入未使用的模块",然后他们添加"两个选项应该是临时的,直到您为项目添加树摇动功能". .所以我认为Tree Shaking应该有一些效果.

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

import RaisedButton from "material-ui/RaisedButton";

而不是这样的:

import {RaisedButton} from "material-ui";

我做了什么:

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

结果:没什么.没有缩小尺寸.也许我做错了什么？

---

对于基准爱好者:这就是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”导入。