如何在React Library“material ui”的第4页中让树震动工作？

Question

虽然我按照文档中解释的步骤（参见此处）启用了树抖动，但它似乎没有任何效果。我将webpack4与ts加载程序一起使用TypeScript。所涉及的库是材质ui。在他们的文档中（参见如何减小捆绑包大小？），他们建议“直接从材料ui导入/，以避免引入未使用的模块”，然后他们添加了“这两个选项都应该是临时的，直到您向项目中添加树震动功能。”。所以我认为树木晃动应该会有一些影响。

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

import RaisedButton from "material-ui/RaisedButton";

而不是像这样：

import {RaisedButton} from "material-ui";

我所做的：

• 仅使用ES2015模块语法（即导入和导出）。
• 在我的项目的package.json文件中添加了一个的"side效果"：false条目。并确保拼写正确。
• 运行Webpack在模式：生产，这是Webpack 4允许使用代替乌干达的JsPlugin（作为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";`)

并且启用了树震动：

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