启动时的React，性能和-500毫秒-数字优化的历史

让我们从冠状病毒中分心，然后谈论一些技术性的话题。例如，关于我们如何尝试缩短一个React应用程序的冷启动时间以及它带来了什么。谁在乎性能和整体快速网络这一主题，请关注。最后，将对这种优化的价格/需求进行一次小型调查。

首先，有一点背景。通常，我们会提供不同的银行应用程序，大多数公众都无法使用。但是最近发生了一个小奇迹，我们被赋予编写公共应用程序的任务（比方说，几乎是公共的）。在基本要求中，仅支持移动优先，响应和IE（甚至11）。其中的功能-一次性应用程序（即用户每年去那里的次数不会超过一次）并且没有数据，因此该应用程序绝对是完全无用的。在某种程度上讲，我们甚至都无法显示页脚，这是没有用的，因为我们根本不知道显示哪种颜色以及在其中写什么颜色。

说到React。选择框架后，结果变得很有趣。我建议Angular，因为我们已经有一个部分编写的组件库，但是客户要求React，因为“ React的一般课程”，“我们都会在那里”和一般而言。但是在开始之后，事实证明React突然也“过时了”，现在Vue开始了常规课程。我们笑了起来，称之为当前的遗留项目，并继续写下去。

. — react-router-dom, — mobx. — SCSS ( ) + css.modules . . , . "-" PureComponent React.memo, bundlesize + source-map-explorer. , .

, *. - mobile-first, client-facing, . . — . . . , , - UI . , , , + . Server Side Rendering. , , , .NET, . — .

* , ?

0,

- , , . , ( — 1000ms) Performance Audit devtools (online 4x CPU slowdown). :

• Firts Paint (FP): 618ms
• First Meaningful Paint (FMP): 2090ms

FP , (), FMP , UI ( ) - . , , 1000 ms (+) . , , . . — 4g* fast 3g **.

, 4g — 2270ms . , , , .

* 4g preset- - . — : download 4000kb/s, upload 3000kb/s, latency 20ms:
** *** , .
*** -, 3 , 10. , — , .

1, React.lazy

, . :

Index.html, React, . js — . , . , , . , .

, *, . — React.lazy, , . , lazy , , . .

:

( ). , , , . ? shared , App.tsx. . , .

* , .

2, Core LazyComponent

, shared module . shared core , , — , , - .

, , , React.Lazy. "" , . , . , . : , . :

export const LazyComponent = <T extends {}>(importStatement: () => Promise<{ default: ComponentType<T> }>) => {
    const component = React.lazy(importStatement);
    return { component, load: importStatement };
};

:

, , , 400ms fast3g - . . .

3, Spinner

, , . , ? "" ! , index.html , . index.html "" ? , . css, .

? , FP . FMP? :

// AppComponent.load();

. , .

, fast3g. , , , , - .

4,

. … ! , . / index.html . . . Fetch IE ( ), promise . . .

index.html :

(function(){const path = `${window.app.api}`; window.app.data = fetch(path); }());

. , promis- , , . — . , index.html .

:

. 300ms . , . , . , .

, API , . preconnect, API. Preconnect IE 11

.

5,

, ? , , . . , ?

LazyComponent ( , ), suspense, . :

FP ( ). FMP . ? — - , , . , JS , index.html . :

.

, css. - , , CSS . JS ( ). ? — . , CSS JS . , css , JS ( , ), CSS , JS .

6,

. — .

, , , . … , . ! , font-weight 100 .

, , :

• . . . - .
• ( 5-6 , HTTP v 1.x)
• . , .
• , , .

( , , JS).

. , . . , font-swap ( , ). , LightHouse .

. link/preload:

<link rel="preload" href="best_font_ever.otf" as="font" type="font/otf" crossorigin="anonymus">

, fast3g (, ). , . , . , UI - .

, :

500-850ms . , "" .

7,

defer (- page speed LightHouse ), , , .

, (0.5 1 - index.html) ( 480ms 1700ms), 500-800ms . , .

():

, .

, :

2. ( )
3. Brotli, gzip.
4. HTTP2.0.

Jeff Cooper .

. ? . . // ( , ). - Google latency 100-400ms, 0.2%-0.6% ( ). CloudFlare , 2.4ms 3.3ms 0.4%, . . , , .

!