コード分割により、初期バンドルサイズを縮小することにより、JavaScriptアプリケーションのパフォーマンスが向上します。コードをオンデマンドでロードされた小さなチャンクに分割することで機(jī)能し、初期負(fù)荷が速く、キャッシングが改善され、ユーザーエクスペリエンスが向上します。 3つの主なタイプは次のとおりです。1。ルートベースの分割 - React.lazyおよびsuspenseを使用したルートごとのロードコード。 2。コンポーネントレベルの分割 - モーダルのような怠zyな非クリティカルコンポーネント。 3。ベンダーの分割 - より長(zhǎng)いキャッシングのための個(gè)別のサードパーティライブラリ。ベストプラクティスには、Dynamic Import（）の使用、Webpackバンドルアナライザーなどのツールを使用したバンドルの分析、リソースのプリフェッチ、ツリーシェーキングが使用されていないコードを排除することが含まれます。ただし、落とし穴には、あまりにも多くのチャンクからのHTTPオーバーヘッド、ローディング狀態(tài)の取り扱い、および利益を損なう大規(guī)模なサードパーティスクリプトが含まれます。コードの分割は合計(jì)サイズを削減しませんが、コードのロード時(shí)に最適化し、怠zyなロードと適切な分析と組み合わせると知覚されたパフォーマンスが向上します。

最新のJavaScriptアプリケーションを構(gòu)築する場(chǎng)合、パフォーマンスが重要であり、負(fù)荷時(shí)間に影響を與える最大の要因の1つはバンドルサイズです。アプリが成長(zhǎng)するにつれて、ダウンロード、解析、実行する必要があるJavaScriptの量も成長(zhǎng)します。ここで、コード分割が重要な最適化戦略として登場(chǎng)します。

バンドルサイズの意味、それが重要な理由、およびコードの分割がどのように役立つかを分解しましょう。

バンドルサイズとは何ですか、そしてなぜそれが重要なのですか？

典型的なJSアプリ（React、Vue、またはAngularで構(gòu)築されたアプリなど）では、依存関係とともにコードがWebpack 、 Vite 、 Rolupなどのツールを使用して1つ以上のJavaScriptファイルにバンドルされます。これはあなたのバンドルです。

• 大きなバンドルサイズは、ダウンロードするデータを増やすことを意味します。
• 遅いネットワークのモバイルユーザーが最も苦しんでいます。
• ブラウザは、アプリがインタラクティブになる前に、JSをすべて解析およびコンパイルする必要があります。これにより、インタラクティブ（TTI）までの時(shí)間が遅くなります。
• 検索エンジンは、ランキングのページ速度を考慮します。

アプリが機(jī)能が豊富であっても、ユーザーはすぐに必要としないコードを読み込むコストを支払うべきではありません。

コードの分割とは何ですか？それはどのように役立ちますか？

コード分割とは、バンドルをオンデマンドまたは並行してロードできる小さなチャンクに分割する慣行です。

1つの500kb main.jsの代わりに、あなたは持っているかもしれません：

• main.js （100kb） - コアアプリロジック
• auth.js （50kb） - ログイン/サインアップコード
• dashboard.js （120kb） - ユーザーダッシュボード
• vendor.js （200kb） - サードパーティライブラリ

これらのチャンクは、必要なときにのみロードされます。

主な利點(diǎn)：

• より高速な初期負(fù)荷
• より良いキャッシング（あるチャンクの変更は他のものを無(wú)効にしないでください）
• 特にモバイルでのユーザーエクスペリエンスの向上

コード分割の種類(lèi)

3つの主なアプローチがあります。

1。ルートベースの分割（最も一般的）

ルートごとにコードを分割します。ユーザーが/dashboardに移動(dòng)する場(chǎng)合、ダッシュボードコードのみをロードします。

 // react.lazy and suspenseで反応します
const dashboard = React.lazy（（）=> import（ './ dashboard'））;

function app（）{
  戻る （
    <サスペンスフォールバック= "ロード...">
      <ダッシュボード />
    </suspense>
  ）;
}

これにより、ほとんどのバンドラーで自動(dòng)的に個(gè)別のチャンクが作成されます。

2。コンポーネントレベルの分割

初期レンダリングでは必要ない、あまり重要でないコンポーネント（モーダル、ツールチップなど）を分割します。

 const imageeditor = React.lazy（（）=> import（ './ imageeditor'））;

まれに見(jiàn)える重いUIコンポーネントに役立ちます。

3。ベンダーの分割

アプリコードから分離されたサードパーティライブラリ（ lodash 、 moment 、 axiosなど）。

なぜ？ベンダーコードは頻繁に変更されるため、ブラウザはより長(zhǎng)くキャッシュできます。

ほとんどのバンドラーは、次のような構(gòu)成でこれを自動(dòng)的に行います。

 // webpackの例
splitchunks：{
  チャンク：「すべて」、
  cachegroups：{
    ベンダー：{
      テスト：/[\\/] node_modules [\\/]/、
      名前：「ベンダー」、
      優(yōu)先度：10、
      reuseexistingchunk：true、
    }
  }
}

ツールとベストプラクティス

• Dynamic import()を使用します- これは、コードの分割をトリガーする標(biāo)準(zhǔn)的な方法です。
• バンドルの分析- Webpackバンドルアナライザーなどのツールは、スペースを取り上げるものを視覚化します。
• プリロードまたはプリフェッチをスマートに- <link rel="prefetch">を使用します。
• クリティカルCSS/JSを小さく保ちます- 早期にレンダリングされるコンポーネントに巨大なライブラリをインポートしないでください。
• ツリーシェーキングは、コードの分割と連攜して動(dòng)作します。未使用のコードが削除されていることを確認(rèn)してください。

例： import _ from 'lodash'のようにlodashをインポートすると、ライブラリ全體がプルされます。代わりに、 import { debounce } from 'lodash-es'を使用して、必要なもののみをインポートします。

落とし穴に気をつけてください

• あまりにも多くの小さなチャンクが、 HTTPオーバーヘッド（特にHTTP/1で）によりパフォーマンスを損なう可能性があります。
• 荷重狀態(tài)は処理する必要があります（例：反応サスペンスで）。
• サードパーティのスクリプト（分析、広告）が大きいと利益を否定できます。

また、覚えておいてください：コードの分割はアプリの合計(jì)サイズを削減しません。これは、時(shí)間の経過(guò)とともに負(fù)荷を広げるだけです。

コード分割は魔法ではありませんが、賢明に使用すると、知覚されたパフォーマンスが劇的に向上します。怠zyなロードと優(yōu)れたバンドル分析を組み合わせて、それは現(xiàn)代のWebパフォーマンスの基礎(chǔ)です。

基本的に：コードが少なく、事前にコードが少なく、必要な場(chǎng)合にのみロードします。

以上が最新のJSアプリでのバンドルサイズとコード分割の理解の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。