React Material-UI的最小示例(仅导入了TextField组件)-结果包大小为250 Kb!
https://github.com/pqr/react-mui-treeshake-does-not-work的最大值
webpack-bundle-analyzer显示所有内容都已导入,没有任何内容发生树摇动。
根据文档https://material-ui.com/guides/minimizing-bundle-size/,树摇动应该工作,引用:
Material-UI的树抖动在现代框架中是开箱即用的。Material-UI在顶层material-ui导入中公开了其完整的API。如果您使用的是ES6模块和支持树抖动的捆绑器(webpack〉= 2.x,带有一个标志的包),您可以安全地使用命名的导入,并且仍然可以自动获得优化的捆绑包大小:
import { Button, TextField } from '@material-ui/core';
但正如这个最小的例子所示,它并不是开箱即用的。
我做了几个实验,通读了问题和StackOverflow,都没能找到解决方案。
- [+]最新版本中存在该问题。
- [+]我已经搜索了此存储库的issues,相信这不是重复的。
当前行为😯
仅导入TextField的最小应用程序包大小约为250 Kb,所有内容均包含在包中(使用webpack-bundle-analyzer分析
预期行为🤔
Bundle不应包含任何与唯一导入的TextField无关的代码,树摇才能正常工作
重现步骤🕹
git clone git@github.com:pqr/react-mui-treeshake-does-not-work.git
cd react-mui-treeshake-does-not-work
npm install
npm run build
npm run analyze
您的环境🌎
| 技术人员|版本号|
| - -|- -|
| 材料-UI| v4.11 |
| React|16.13.1节|
| 浏览器|任何|
| 类型脚本|没有|
| 网络包|四点四十三分|
5条答案
按热度按时间z9smfwbn1#
在我看来,这很好。这是一个
TextField
过载的问题。它目前包括Select
组件,该组件需要Popover
,Modal
,List
等。树抖动正在工作,否则你会看到更多的组件。你可以通过导入
Button
来验证这一点。vnjpjtjt2#
这更像是一个TextField重载程度的问题。
@eps1lon我们讨论的时候(或者甚至同意)将select用例移到TextField之外,使用新的SelectField组件。我不知道我们有专门的问题。我们使用这个问题怎么样?它似乎完全匹配(不同的是,作者没有意识到TextField的整个依赖链相当大)如果我们这样做,我们可以重新打开,直到修复:)。
mwkjh3gx3#
这一期是关于树摇的。为什么重新定位它如此重要?这是什么解决了一个新问题不能?
avwztpqn4#
@pqr希望他的应用程序只包含他需要的代码。
他注意到很多组件与显示输入没有明确的关系。他继续假设这是因为树的震动被破坏了。错了。
因此,据我所知,我们使用SelectField组件建议来覆盖相同的根本痛点。只是作者对痛点来源的解释是错误的,根本问题仍然存在:文本字段不应捆绑选择。
建议的解决方案是:
ilmyapht5#
我们的团队对此也是措手不及。我们注意到表单页面的捆绑包大小非常庞大,尽管我们只使用了material-ui中的文本字段和按钮。我们花了很长时间试图找出捆绑包在哪里出错,并导入了Select和Modal,结果发现TextField默认包含Select、Modal和它们的许多依赖项。
对于遇到这个问题的其他开发人员,这里有一个权宜之计,可以在material-ui进行正式修复的同时大大减少TextFields的大小。(这样,只有您使用的变体类型才会包含在套件中,而不是预设包含所有3个标准、轮廓和填充变体元件):
ComposableTextField.tsx
只需将任何对TextField的引用替换为ComposableTextField组件即可。并确保传入您要使用的InputComponent变量:
替换为:
有了这个:
顺便提一下,material-ui文本字段文档确实提到了可以使用较低级别的组件来更好地定制TextFields,但也许还值得一提的是,可以使用这些较低级别的组件来减少Minimizing Your Bundle Size documentation中的包大小。