0

我的团队编写了一个 Web 应用程序，create-react-app我们希望在初始页面加载时保持较小的包大小。现在我们只是在输出的 javascript 文件上运行gzip并了解整个包的大小（类似于 的输出），但这还不足以告诉我们所有包的大小初始页面加载需要。wcbuild/react-scripts build

现在我计划依靠解析build/index.html和查找哪些脚本标签引用绝对路径（以避免计算第三方脚本），以便识别在初始页面加载时加载了哪些块，但我确实想知道代码是否可能加载对初始绘制很重要的 javascript 端。我不这么认为，但我也不明白 CRA 是如何工作的，不足以明确地说出来。

我的队友也在想，也许我们应该只在无头浏览器中加载登录页面，并确定以这种方式加载页面时加载的脚本，尽管最好有一种更轻量级的方式来执行此检查。

提前致谢！

4

1 回答 1

1

React.lazy如果您的入口点包含延迟加载的块（使用或类似方法），则简单地解析 html 输出将不起作用。

使用此PR，您可以使用 webpack 的 JSON 输出进行分析，通过传递--stats给build脚本：（yarn build --stats如果您使用npm不要忘记使用--将标志转发到内部脚本npm run build -- --stats：）

这将创建build/bundle-stats.json您可以直接在 nodejs 脚本中导入的内容。它包含从 webpack 输出的块列表及其依赖图

我能想到的唯一选择是使用 puppeteer，但这更适合测量用户特定的指标，比如交互时间。我建议对任何构建时间测量使用简单的节点脚本

于 2019-07-08T20:27:59.980 回答