我的团队使用 create-react-app 编写了一个 Web 应用程序，我们希望在初始页面加载时保持较小的包大小。现在，我们只是在 build/ 中输出的 javascript 文件上运行 gzip 和 wc 来了解包的整体大小(类似于 react-scripts build 的输出)，但这还不足以告诉我们初始页面加载所需的所有包的大小。
目前，我计划依靠解析 build/index.html 并查找哪些脚本标记引用绝对路径(以避免计算第三方脚本)，以便识别加载了哪些 block 在初始页面加载时，尽管我确实想知道是否可以在 javascript 端加载代码，这对于初始绘制很重要。我不这么认为，但我也不明白 CRA 的工作原理足以明确地说出这一点。
我的队友也在想，也许我们应该在 headless 浏览器中加载登陆页面，并确定页面上加载的脚本以这种方式加载，尽管最好有一种更轻量级的方法来执行此检查.
提前致谢!
最佳答案
如果您的入口点包含延迟加载的 block (使用 React.lazy 或类似方法)，则简单地解析 html 输出将不起作用。
有了这个PR您可以使用 webpack 的 JSON 输出进行分析，方法是将 --stats 传递给 build 脚本:yarn build --stats (如果您使用 npm 不要忘记使用 -- 将标志转发到内部脚本:npm run build -- --stats)
这将创建 build/bundle-stats.json ，您可以直接在 Nodejs 脚本中导入它。它包含从 webpack 输出的 block 列表及其依赖关系图
我能想到的唯一替代方案是使用 puppeteer，但这更适合测量特定于用户的指标，例如交互时间。我建议使用简单的节点脚本来测量任何构建时间
关于javascript - 以编程方式确定初始页面包大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56940768/