我的团队使用create-react-app编写了一个Web应用程序，我们希望在初始页面加载时将包的大小保持较小。现在，我们仅在gzip中输出的javascript文件上运行wc和build/，以大致了解分发包的大小（类似于{{1}的输出}），但这还不足以告诉我们初始页面加载所需的所有捆绑软件的大小。
目前，我计划依靠解析react-scripts build并查找哪些脚本标记引用了绝对路径（以避免计算第三方脚本），以便确定在初始页面加载时加载了哪些块。我确实想知道是否有可能在javascript端加载代码，这对于初始绘制很重要。我不这么认为，但我也不太了解CRA的运作方式，足以明确地说出来。
我的队友也正在考虑也许我们应该将浏览器页面加载到无头浏览器中，并确定以哪种方式加载页面上的脚本，尽管最好采用一种重量较轻的方式进行此检查
谢谢！
答案 0 :(得分：1)
如果您的入口点包含延迟加载的块（使用React.lazy或类似方法），则无法简单地解析html输出。
使用此PR，您可以通过将--stats传递到build脚本：yarn build --stats（如果使用npm don，来使用webpack的JSON输出进行分析不要忘记使用--将标志转发到内部脚本：npm run build -- --stats）
这将创建build/bundle-stats.json，您可以直接将其导入到nodejs脚本中。它包含从webpack输出的块的列表及其依赖图
我能想到的唯一替代方法是使用puppeteer，但这更适合于测量特定于用户的指标，例如交互时间。我建议使用简单的节点脚本进行任何构建时间测量