【发布时间】：2020-10-07 14:56:51
【问题描述】：
在开发中启动 react.js 时，它需要大约 3 或 5 分钟才能加载。时间会有所不同，启动后刷新速度足够快...
此外，在进行生产构建时，它需要很多时间。
是什么原因造成的？ 有一些巨大的组件，有些像 500~ 行，有些组件有 ~2k 行。 巨大的组件会导致这种情况吗？
第一次更新 - 今天尝试在开发中启动 react 应用程序 4 次。
- 开发的首次启动耗时 4 分 10 秒。
- 第二次开始开发耗时 3 分 12 秒。
- 第三次开发启动耗时 2 分 30 秒。
- 第四次开始开发耗时 2 分 35 秒。
还尝试构建生产版本并查看具体需要多长时间。
- 第一次生产构建 - 7 分 27 秒。
- 第二次生产构建 - 3 分 41 秒。
- 第三次生产构建（删除了所有构建文件） - 3 分 34 秒。
另外，那些拥有 500 到 2k 行代码的大型组件也不是我的设计选择。当我加入项目时，我只是发现它是这样的。现在我只是想知道需要这么长时间来启动开发服务器进行反应是否可以。
构建完成时的输出消息：
File sizes after gzip:
2.37 MB build/static/js/2.6d79667f.chunk.js
72.79 KB build/static/css/2.37cd983e.chunk.css
52.85 KB build/static/js/main.375a34e0.chunk.js
2.17 KB build/static/css/main.5827d774.chunk.css
796 B build/static/js/runtime-main.a4023761.js
The bundle size is significantly larger than recommended.
Consider reducing it with code splitting: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting
You can also analyze the project dependencies: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#analyzing-the-bundle-size
The project was built assuming it is hosted at http://localhost:5050/.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
Find out more about deployment here:
https://github.com/facebook/create-react-app/blob/master/packages/cra-template/template/README.md
【问题讨论】：
-
如果这些块大小是可以预期的，那么它是一个查看输出的开发版本。如果您运行生产构建，您会看到 2.37MB 的顶部块下降到只有 KB。生产构建需要比开发更长的时间的原因是因为生产必须构建所有内容，开发将使用那里的内容，因为通常您拥有所有节点包构建并准备就绪。我会查看您正在使用的节点包的数量，它们是最新的吗？有没有多余的？
-
我做错了什么吗？例如，显示的输出是生产构建的输出。毕竟处理最大的块占用了 2.37MB 的内存？这就像将提供给用户的那个块的最终大小？
-
出了点问题，因为您不应该在生产构建中提供这种大小的 JS。我不会很高兴使用您的应用程序并且必须下载一个 2.37MB 的 JS 文件。我将开始进行代码审查，以了解该块的内容以及您可以做些什么来改善大小。
-
安装 source-map-explorer npmjs.com/package/source-map-explorer 并且您应该能够识别包含的内容以及导致大小问题的原因。
-
哇@Richard 我真的很感谢你。这个工具清楚地说明了为什么该块如此巨大！非常感谢！
标签： reactjs build development-environment production