Webpack 如何在React Library的第4页中让树震动工作；材料用户界面；？

虽然我按照文档中解释的步骤（请参阅）启用了树抖动，但它似乎没有任何效果。我将

webpack4

与

ts加载程序一起使用
TypeScript
。所涉及的库是
材质ui
。在他们的文档（请参阅）中，他们建议“直接从
材料ui/
导入，以避免引入未使用的模块”，然后他们添加了“这两个选项都应该是临时的，直到您向项目中添加树震动功能。”。所以我认为树木晃动应该会有一些影响

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

import RaisedButton from "material-ui/RaisedButton";

import {RaisedButton} from "material-ui";

不是这样的：

import RaisedButton from "material-ui/RaisedButton";

import {RaisedButton} from "material-ui";

我所做的：


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

结果：无。不缩小尺寸。也许我做错了什么


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

并具有缩小功能（无压缩）：

并且启用了树震动：

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

也就是说：完全没有效果。
正如@qx3所写，我已经能够通过添加：

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

在我的网页配置

请注意“@”前缀和“/core”后缀以适应库的新命名。这个简单的小东西帮助我去掉了一些字节，使团队能够以完全符合esm的方式编写“@material ui/core”导入
 我遇到了同样的问题。看见另请参见中的问题链接，我通过我之前评论中的链接找到了我的问题（与您的问题类似？）。如果您使用webpack 4.x，请使用babel，将“模块”：false添加到babelrc环境：“预设”：[[“env”、{“模块”：false}]、“react”、“stage-0”]，如果您将别名添加到webpack.config.prod.js（或类似内容）的材质ui/es中。。类似于：``解析：{……别名：{'material ui'：'material ui/es'}``您应该能够使树震动正常工作。从“material ui import RaisedButton from”导入{RaisedButton}与从“material ui import RaisedButton from”导入{RaisedButton}之间的差异“那么，在使用es模块和树抖动时，它们并不重要。只有当树抖动在您的项目中实际不起作用时，这种不同才重要，如文档中所述：“如果树抖动可以起作用，那么使用这种方法是可以的，但是，在生成链中不支持或配置树抖动的情况下”-此外，使用webpack bundle analyzer在确定、可视化和优化捆绑包大小方面非常有帮助：您可能还想阅读我的案例，我们不使用typescript，而是使用babel。这篇文章揭示了一些限制，并展示了一种使用babel（typescript用于类型检查等）的解决方法并成功摇动了lodash树。希望所有这些都有帮助。干杯。在将这一行添加到web包配置中后，我遇到了以下错误：``在./node_modules/@material ui/core/es/TextField/TextField.js中出错109:46模块解析失败：意外令牌（109:46）您可能需要一个合适的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。请参阅| | if（label）{>const displayRequired=InputLabelProps？.required？？required；```因此解决方案不起作用