ネットワーク最適化とReat 18

繰り返しても復習の概念や説明できる程度の概念で勉強し直して整理します
定期的にブログに内容を公開しておけば、後で見ている間にも勉強を繰り返すことができます.

1. 🖨 整理し直す理由

常に再整備を行う根本的な原因は一つしかない.覚えてないから.
ブログで整理しても、人間なので忘れがちなものは変わらず、そのたびに定期的にチェックして確認する習慣を身につけましょう.ネット最適化の内容については前に一度整理したことがありますが、当時は内容に対する理解が足りなかったためか、実質的なものが頭になかったのかもしれません.これは最終的に面接で何も言えず、ぐずぐずした結果をもたらします.
そして私はずっと考えていましたが、再整理すれば、すでに知っている内容の中でも新しい悟りがあると思っていたので、そういう楽しみもあったので、再整理する時間がありました.

2. 📱React 18によるネットワークパフォーマンスの最適化

通常、クライアント上で最適化を行う場合は、FTP(first time to paint)の速度がどれほど速いかを考慮する必要があります.
通常使用されるライブラリ「react」には4つのステップがあります.
1.httpリクエストによるサーバからのhtmlファイルの受信
2.htmlファイルの分割
3.(http 2.0の場合)linkラベルなどの要素に遭遇した場合の非同期リクエストファイル
4.scriptタグに遭遇した場合は停止し、jsファイルを受信して水和する.
水和は、生成されたhtmlフレームワークにインタラクティブなjsコードを追加するプロセスである.
このとき,コード全体のモジュール統合において,あるモジュールの内容に他のサーバから要求されたり,非常に大きなデータを処理する必要がある内容がある場合,既存の反応CSRであれば,最終的にjsファイル全体の処理速度が遅くなり,ユーザはより長い空白の画面を見ることができる.
すなわち、このような複雑な論理を有する素子は、独立して処理することが望ましい.

<Layout>
  <NavBar />
  <Sidebar />
  <RightPane>
    <Post />
    <Suspense fallback={<Spinner />}>
      <Comments />
    </Suspense>
  </RightPane>
</Layout>

したがって、react 18では、Suspenseという付加的なタグが使用され、このコンポーネントは、個別のデータFetchingを完了する前に、概略fallback propertyに含まれる要素を示し、データ取得を完了した後、そのコンポーネントを使用して処理される.
ここに追加
以上、Webパッケージに統合された大きなモジュールで、コストの高いネットワークリクエストを要求するために1つのモジュールを使用する方法について説明した.
1つのモジュールがどうせ画面に表示されないのに、そのモジュールのコードが多すぎてロード全体が遅くなった場合、どうすればいいですか?
では、いずれにしても、今使われていないコードは別々に書いて、後で簡単にパッチワークできるようにしたほうがいいです.このときreactを使用します.怠け者

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}> 
        <OtherComponent /> // lazy 대상은 항상 Suspense 태그의 자식이어야 한다
      </Suspense>
    </div>
  );
}

上述したように、これらのコンテンツは、配備時にreactから自動的にWebパケットに分割されたコードから剥離され、必要に応じてサーバから受信され、処理が遅延し、jsモジュールファイル全体の水和を妨げることはない.
コード分割はnextです.jsでサーバ側レンダリングを行うときに生成された分割ファイルを構築することを連想すると、容易に理解できます.


緑色の部分を最初のhtmlファイルを受信し、レンダリング時にscriptラベルとして受信するjavascriptファイルと理解すれば便利です.このjsファイルでは、コード分割jsがブロック単位で分離されているため、htmlとの結合を妨げることなくjsファイル全体が独立して行われる.
これはreact 18を導入する際に期待できるネットワーク最適化である.
しかし、このバージョンはまだアルファ段階であり、実戦で使用する際に予想外のエラーが発生する可能性があるため、さらなる観察が必要である.

3. 📱ファイルの圧縮による最適化

httpを介して発行されるリクエストの大部分はモジュールパッケージによってバインドされており、バインド自体のサイズが大きい場合、ネットワーク上の応答は当然遅くなります.
すなわち,このバンドルパッケージをもう一度圧縮して軽量化する必要がある.
幸いなことに、世界には天才が多く、アルゴリズムによって自動的に圧縮できる便利な機能があります.それは、HTTPリクエストヘッダの「受信-符号化」とHTTP応答ヘッダの「コンテンツ-符号化」です.
両方がペアで、サーバとクライアントが適用されます.
このとき最も一般的なオプションはGzipであり、要求ヘッダにAccept-Encode:gzipを設定し、応答ヘッダもgzipに設定することで、圧縮を最適化することでバンドルパケットを軽量化することができる.
ちなみに、最近GoogleがBrotli形式を発表しました.圧縮量は良いですが、IEはサポートされていません.IEを考慮すると「gzip」を「br」に設定し、Brotliを使用する場合はタイトルを「br」に設定することができます.

4. 📱CDN

その名の通り、CDNはデータ伝送の中継局である.
もし私が大韓民国にアメリカのサーバー上のデータ(ex,YouTube)を要求したら
地球の反対側にあるデータが瞬時にここに到達できるのは,そこから直接ではなく,CDNサーバを介してキャッシュコンテンツを転送するためである.
CDNサーバを介して通常の静的ファイルをキャッシュして保存し、要求に応じて転送することで、最大80%の容量を節約できるため、グローバルなサービスを提供する場合は、CDNを介してすべてのアプリケーションを伝播する導入サービス(ExAWS)を使用することが望ましい.

5. 📱 イメージライト

実際、すべてのリクエストを遅くする最も主要な原因は画像です.(総容量の50%以上が画像で占められているそうです)
したがって、イメージを使用するときにすべてのイメージにリクエストを送信すると、ネットワークのボトルネックが自動的に発生します.

上のアイコンがネットワークリクエストを発行しているとします.リクエストだけでもすでに5つ以上ありました.
むしろ、これらの1ページの画像を1つの画像に圧縮し、background-positionオプションを使用して配置して表示します.これは、より効果的な要求かもしれません.

ちなみに、背景-姿勢は、特定の画像の位置調整が可能なオプションです.例えば、画像がimgタグで受信されている場合、imgタグ自体にdisplay:inline-blockを設定すると、そのタグ要素サイズ以外の画像は表示されません.この場合、background-positionとして表示する必要がある画像を調整すれば、残りの部分を表示せずに、その画像の特定の部分のみを表示することができる.

6. 📱 画像フォーマットの変更

画像を特定のフォーマットに圧縮して変更すると、必要な画像を表示しながら損失を最小限に抑えることができます.最近発売されたWebP Pometはpngに比べて容量が26%以上減少したが,実際に表示される損失率は非常に低かった.
しかし、これらのフォーマットは最新の技術であるため、古いブラウザではサポートされていないという欠点があるため、消費者層を正確に判断する必要がある.
次なら.jsを使用する場合、フレームワークが提供するイメージコンポーネントを使用して、webpでサポートされているかどうかを判断し、サーバに要求することができます.

import Image from 'next/image'

const myLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}

const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src="me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

REEXTのような一般的なJavaScriptライブラリを使えば、内部を画像タグで包むことができます.
(実際には、次の.jsの画像コンポーネントが組み合わせられている可能性があることを覚えています)

<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="logo">
</picture>

上記のように、ブラウザがsourceラベルのscrsetのフォーマットをサポートしていない場合、sourceは無視され、imgラベルが使用されます.