为什么要懒惰地增加首次加载时间

时间：2018-11-30 17:35:35

标签： reactjs

我有一个很小但很有趣的应用程序。这是一个快速的实验，以了解有关Redux的更多信息并做出反应，并且我认为该应用程序已经足够成熟，可以开始学习优化。

我做了一些纯粹的组件优化方法，但是它们并没有缩短首次加载时间，所以我继续。 我尝试的下一个优化是使用react lazy来延迟加载一些我第一次不需要的组件。例如，我有一个错误组件，只有在必须显示不太可能的错误时才需要，所以这就是我所做的，并且令人惊讶（根据灯塔），所有首次时间指标（首次互动时间，首次互动时间）有意义的油漆等）变得更糟。

下面是尝试使用react lazy之前的报告屏幕截图：

without react lazy

正如您所看到的，从性能的角度来看，没有太大的改进，但是当我试图学习现代的反应时，我还是尝试了。这是我最好的使用react lazy来拆分一个组件的方法：

with react lazy

如您所见，情况更糟。它检测到的问题并不都与缓存策略有关，它们是：

detected problems

似乎主线程正在忙于解析所有javascript。这对我来说没有任何意义，因为转到Chrome开发工具并详细检查网络请求（在“性能”选项卡上），结果包将并行下载。但是，这两个版本上的捆绑包大小几乎相同，只是该应用程序的拆分版本有5个块，而不是2个：

第一个未拆分代码的捆绑包

URL
bundle.js
Duration
45.62 ms
Request Method
GET
Priority
High
Mime Type
application/javascript
Encoded Data
6.5 KB
Decoded Body
31.0 KB

第一个具有反应惰性分割的束

URL
bundle.js
Duration
28.63 ms
Request Method
GET
Priority
High
Mime Type
application/javascript
Encoded Data
7.1 KB
Decoded Body
33.7 KB

首先下载的块：

Network request
URL
0.chunk.js
Duration
255.83 ms
Request Method
GET
Priority
High
Mime Type
application/javascript
Encoded Data
579 KB
Decoded Body
2.7 MB

具有反应懒散拆分的第一个块（标记为5，但实际上是第一个）：

URL
5.chunk.js
Duration
276.40 ms
Request Method
GET
Priority
High
Mime Type
application/javascript
Encoded Data
559 KB
Decoded Body
2.6 MB

我的结论是，react lazy带来了巨大的开销，只有在加载的组件足够大的情况下，这种开销才会得到回报。 HoweVer，这是否意味着大笔应用永远不会在首次涂漆时获得高分？ 我用VUE制作了一些更大的应用，性能几乎达到90，所以我很确定自己在这里做错了。

值得一提的是，第一个屏幕快照是从github页面提供的，而第二个屏幕快照是在本地提供的，但这不应该影响当前的问题，对吗？

此应用的非拆分版本的代码可在此处公开获得：https://github.com/danielo515/itunes

1 个答案:

答案 0 :(得分：1)

“脚本评估”中最大的时间消耗为1.672ms。因此，请尝试减少此时间。

  1. 分析JavaScript的大小，您可以用较小的JavaScript替换哪些库 版本或使用纯JavaScript。如果您使用CRA，请尝试Analyzing the Bundle Size或webpack-bundle-analyzer。例如，代替lodash 也许您可以使用较小的库lodash-es;

  2. 使用服务器端渲染。考虑使用loadable-components （来自React doc的建议）。但是，如果使用慢速服务器（或现金流量较低），则可能会增加“第一个字节的时间”值；

  3. 使用Pre-Rendering into Static HTML Files。

另外，webpagetest.org是用于网页速度分析的非常有用的工具。

相关问题
最新问题