【发布时间】：2021-01-18 16:25:05
【问题描述】：
我们在一个非常大的单体应用上使用create-react-app（和react-app-rewired）。我们对构建时间进行了一些改进（将其缩短到大约 20 秒），但在构建完成后（在 yarn start 之后）应用程序需要 2 分钟才能真正加载浏览器。
在app.jsx 中，我尝试删除所有根代码，只渲染了一个典型的“Hello World”p 标记，它几乎不需要那么长时间。我还使用serve 在构建文件夹前运行了一个基本的Web 服务器，这表明它可能webpack-dev-server 存在应用程序大小的问题（或者说它是在实际构建之前构建的？）。
在 chrome 开发工具网络选项卡中，阻止页面加载的资产是来自 static/js 文件夹的文件。
Here 是来自webpack-bundle-analyzer 的结果的要点
有没有人知道这个问题可能源于何处以及如何改善构建后的加载时间？
【问题讨论】：
-
编译后的文件有多大？您可以尝试运行
webpack --profile --json > webpack-stats.json。有一些网站，例如 chrisbateman.github.io/webpack-visualizer 和 webpack.github.io/analyse，您可以在其中上传该 json 文件以获得依赖关系的可视化图表。 -
构建时间取决于 webpack 打包源文件的时间。这也取决于您使用的加载器和插件。看看webpack howtos optimize build time。至于在您的网络选项卡中阻止
static/js的资产 - 如果文件太大而无法加载 - 尝试进行代码拆分 -
请提供大小、文件数等
-
请包含来自 webpack-bundle-analyzer 或 source-map-explorer 的有关包大小和统计信息的详细信息
标签： reactjs webpack create-react-app micro-frontend react-app-rewired