反应root.js重量约9MB

Question

好吧，所以...我有这个项目，我们使用了很多组件（像往常一样在每个React项目中）但是当我们编译项目以在浏览器中看到它时（即.foreman start）需要花费大量时间加载以及加载时它会创建一个非常大的文件。

我们不知道为什么会这样，可能是我们搞砸了，我们还不知道。

我不知道你需要看哪部分代码来帮助我理解为什么会这样。让我知道，我会把它给你。

另外，我想知道是否有办法防止该文件那么大，只要我知道它应该重量不超过2Mb或者什么......

提前致谢！

Answer 1

出现此类问题的典型原因不是您所制作的组件数量，而是您使用的库。您可以通过首次运行来检查大型捆绑包的原因

webpack --json > stats.json

然后安装并运行webpack bundle analyzer

webpack-bundle-analyzer stats.json

在此之后，您需要开始修复大尺寸的原因。

通常这将取决于大束大小的原因是什么..但以下方法肯定会有所帮助。

• code splitting for react
• code splitting for webpack
• 使用webpack's optimizations
• 并且，因为有时树木抖动不会像预期的那样好。你可以改变你的进口风格

import {x, y} from 'library';

至

import x from 'library/x';
import y from 'library/y';

这将确保如果库中有10个导出，那么所有这些导出都不会被加载...只有那些需要的才能完成。例如，如果您使用的是lodash，

import {debounce} from 'lodash';

将导入整个lodash库

import debounce from 'lodash/debounce';

只会导入该特定文件。还有其他方法可以优化您的输出（如webpack externals），但这取决于实际导致问题的原因。

注意很多答案都假设您使用webpack捆绑代码。但是，如果不是这种情况，则需要搜索优化并对所使用的特定捆绑工具进行分析