以编程方式确定初始页面包大小答案

【问题标题】：Determine initial page bundle size programmatically以编程方式确定初始页面包大小
【发布时间】：2019-11-18 07:32:05
【问题描述】：

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

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

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

提前致谢！

【问题讨论】：

我编写了这个 bash 脚本，它快速而肮脏地解析 build/index.html：grep -o '<script[^>]*src="/static/js/[^"]*"' build/index.html | sed -n -e 's/^.*src="$[^"]*$.*$/\1/p' | awk '{print "./build" $0}'。输出以/static/js开头的js文件，直接被build/index.html引用。除非其他人认为这是一种不好的方法，否则我将暂时使用它。
您可以打开 chrome devtools 并检查网络选项卡，每个 javascript 文件的大小以及初始绘制需要多长时间。
为了澄清我的用例是在 CI/tests 中进行自动检查，以确保 PR 之间的初始捆绑包没有显着增加。因此，手动打开 devtools 并不是我真正想要的。

标签： javascript reactjs webpack create-react-app react-suspense

【解决方案1】：

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

有了这个PR，你可以使用来自webpack的JSON输出进行分析，通过将--stats传递给build脚本：yarn build --stats（如果你使用npm不要忘记使用--转发标记到内部脚本：npm run build -- --stats)

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

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

【讨论】：

我稍后会尝试一下，看看我是否能找到一种方法来判断哪些块用于单个页面（由反应路由器定义）。