JavaScriptコード分割について知る必要があるすべて

Feb 2, 2026

操作方法

現代のサイトは、JavaScriptの全てを単一の、大きく組み合わせることがよくあります main.js. 脚本。これにより、ユーザーが表示されているページのためだけに小さな部分を必要としていなくても、すべてのページまたはルートのスクリプトが定期的に含まれています。

JavaScriptがこのように提供されるとき、あなたのWebページのロードパフォーマンスが低下する可能性があります - 特に レスポンシブウェブデザイン モバイル機器についてそのため、JavaScriptコード分割を実装して修正しましょう。

より速くコード化された、JavaScriptをより軽いにする方法

コード分割はどのような問題を解決しますか？

WebブラウザがAを見たとき ＆lt;スクリプト＆gt; 参照するJavaScriptをダウンロードして処理する時間を過ごす必要があります。これはハイエンドデバイスでは速く感じることができますが、未使用のJavaScriptコードの読み込み、解析、実行中のネットワークと遅いCPUを使用して、平均的なモバイルデバイス上で時間がかかります。コーヒーショップやホテルのWiFiにログオンしなければならなかった場合は、ゆっくりとネットワークの経験が発生する可能性があります。

JavaScriptを待っている各2番目の毎秒が起動を終了すると、ユーザーが経験とどのように対話できるかを遅らせることができます。これは、UXが重要なコンポーネントのJSに依存している場合、またはUIの単純な部分のためにイベントハンドラを添付するだけでも、特に当てはまります。

コード分割に気にする必要がありますか？

あなたがコード分割する必要があるかどうかをあなた自身に尋ねる価値がある（単純なものを使った場合） ウェブサイトビルダー あなたはおそらくいません）。サイトに対話内容のJavaScriptが必要な場合（メニュードロワーやカルーセルなどの機能の場合）、またはUIをレンダリングするためのJavaScriptフレームワークに頼る単一ページアプリケーションが必要な場合は、「はい」です。コード分割があなたのサイトにとって価値があるかどうかはあなた自身に答える必要がある質問です。あなたはあなたのアーキテクチャとあなたのサイトがどのようにロードするかを理解しています。ありがたいことにあなたを助けるために利用可能なツールがあります。デザインシステム全体で変更を実装している場合は、共有の変更内容を保存することを忘れないでください。 クラウドストレージ だからあなたのチームは見ることができます。

助けを得ます

JavaScriptコード分割の新しいものについて、灯台 - Chrome Developer Toolsの監査パネル - これがあなたのサイトにとって問題であるかどうかの上に光を輝くのを助けることができます。探したい監査はJavaScriptの実行時間を短くすることです（文書化されているここに）。この監査は、ユーザーがそれと対話することができるページ上のすべてのスクリプトを強調表示します。

PageSpeed Insights. サイトのパフォーマンスを向上させることもできるオンラインツールで、Chromeユーザーエクスペリエンスレポートからのサイトのパフォーマンスに関するラボデータと現実世界のデータが含まれています。きみの ウェブホスティング サービスは他のオプションを持つことができます。

Chrome Developer Toolsのコードカバレッジ

あなたがより良い分割をすることができ、高価なスクリプトを持っているように見える場合は、見て次のツールは、Chromeデベロッパーツール（;右上のメニュー＆GT;より[ツール]＆gt;カバレッジデベロッパーツール＆GT）でのコードカバレッジ機能があります。これにより、未使用のJavaScript（およびCSS）がどのくらいのページに含まれているかを測定します。要約された各スクリプトに対して、DevToolsは「未使用のバイト」を表示します。これはコードです。ユーザーが必要とするときに分割アウトと遅延ロードを検討することができます。

異なる種類のコード分割

コード分割JavaScriptがコード分割するときに取ることができるいくつかの異なるアプローチがあります。これらのサイトに適用されるのは、ページ/アプリケーションの「ロジック」を分割するか、他の「ベンダー」からライブラリ/フレームワークを分割したいのかによって異なります。

動的コード分割： 米国の多くは、ビルド時に1つのファイルにまとめられているように、JavaScriptモジュールと依存関係をインポートします。 'Dynamic'コード分割は、必要に応じて分割して遅延ロードを分割したいというJavaScript内のポイントを定義する機能を追加します。現代のJavaScriptは動的を使用しています インポート（） これを達成するための声明。これをより短くカバーします。

ベンダーコード分割： あなたが頼っているフレームワークとライブラリ（例えば、React、Angular、VueまたはLodash）は、あなたがあなたのユーザーに送信したスクリプトでは、あなたのサイトの「論理」として変更することはまず変化しません。サイトに戻るユーザーに対するキャッシュ無効化の悪影響を低減するために、「ベンダー」を別のスクリプトに分割できます。

エントリポイントコード分割： エントリは、WebPackのようなツールがあなたの依存ツリーを構築するために見ることができるツールをあなたのサイトまたはアプリの出発点です。エントリごとの分割は、クライアントサイドルーティングが使用されていないページに役立ちます。またはサーバーとクライアント側のレンダリングの組み合わせに頼っています。

この記事の目的で、ダイナミックコード分割に集中します。

コード分割で手を取得します

AのJavaScriptのパフォーマンスを最適化しましょう 3つの数字をソートする簡単なアプリケーションコード分割を通して - これは私の同僚のHoussein Djirdehによってアプリです。 JavaScriptロードをすばやくするために使用するワークフローは、測定、最適化、および監視されます。ここから始める。

性能を測定します

最適化を追加する前に、まずJavaScriptのパフォーマンスを測定する予定です。マジックソーターアプリがグリッチでホストされているので、コーディング環境を使用します。これについて行く方法です。

[ライブの表示]ボタンをクリックします。
CMD + Option + I / Ctrl + Shift + iを押してDevToolsを開きます。
ネットワークパネルを選択してください。
キャッシュを無効にすると、アプリをリロードしてください。

この簡単なアプリケーションは、数字を並べ替えるためだけに71.2 KBのJavaScriptを使用しているようです。確かに正しいようではないことがあります。私たちの情報源に src / index.js. 、Lodashユーティリティライブラリがインポートされています 並び替え - 私たちの数を並べ替えるためにそのソートユーティリティの1つ。 Lodashはいくつかの便利な機能を提供しますが、アプリはそれから単一の方法のみを使用します。実際の事実にあるときは、すべての部分を使用する必要がある場合は、サードパーティの依存関係をすべてインストールしてインポートするのが一般的な間違いです。

あなたのバンドルを最適化します

JavaScriptバンドルサイズをトリミングするためのいくつかのオプションがあります。

第3partyライブラリに頼る代わりに、カスタムソートメソッドを書いてください。
使用する array.prototype.sost（） これはブラウザに組み込まれています。
インポートするだけです 並び替え ライブラリ全体の代わりにロドッシュからの方法。
ユーザーが必要な場合（ボタンをクリックすると）ソートのコードをダウンロードしてください。

オプション1と2は私たちのバンドルサイズを減らすのに適しています - これらはおそらく実際のアプリケーションにとって意味があります。教育目的のために、私たちは違うものを試すつもりです。オプション3と4はアプリケーションのパフォーマンスを向上させるのに役立ちます。

必要なコードをインポートするだけです

シングルをインポートするためのいくつかのファイルを変更します 並び替え 私たちがロドッシュから必要です。私たちの交換から始めましょう ロード 依存 Package.json. ：

"lodash": "^4.7.0",

これとともに：

"lodash.sortby": "^4.7.0",

src / index.jsでは、このより具体的なモジュールをインポートします。

 JS.
インポート "./style.css";
"Lodash"から_をインポートします。
"Lodash.Sortby"からの輸入石油

次に、値のソート方法を更新します。

 JS.
Form.AdDeventListener（ "submit"、e =＆gt; {
  E.PreventDefault（）;
  const値= [INPUT1.VALUEASNUMBER、INPUT2.VALUEASNUMBER、INPUT3.VALUEASNUMBER];
  const sortedvalues = _.SOSTBY（値）;
  const sortedvalues = sortby（値）;
  results.innerhtml = `
    ＆lt; h2＆gt;
      $ {SORTEDVALUES}
    ＆lt; / h2＆gt;
  `
;）;

マジックナンバーアプリをリロードし、開発者ツールを開き、もう一度ネットワークパネルを調べます。この特定のアプリのために、私たちのバンドルサイズは4のスケールで、ほとんど仕事をしませんでした。しかし、まだ改善の余地があります。

JavaScriptコード分割

WebPackは、今日Web開発者が使用する最も人気のあるJavaScriptモジュールバンドラの1つです。それは「バンドル」（組み合わせて）あなたのJavaScriptモジュールやその他の資産を静的ファイルにWebブラウザに読み込むことができます。

このアプリケーションの単一のバンドルは、2つの別々のスクリプトに分割できます。

1つは最初の経路を構成するコードを担当します。
もう一つのソートコードが含まれています。

動的インポートを使用する インポート（） キーワード）、2番目のスクリプトは遅延需要に遅延ロードできます。マジックナンバーアプリでは、ユーザーがボタンをクリックするとスクリプトを構成するコードを必要に応じてロードできます。ソート方法のトップレベルのインポートを削除することから始めます。 src / index.js. ：

「Lodash.Sortby」からの並べ替え;

ボタンをクリックしたときに発生するイベントリスナー内にインポートします。

Form.AdDeventListener（ "submit"、e =＆gt; {
  E.PreventDefault（）;
  輸入（ 'Lodash.Sortby'）
    .then（module = gt; module.default）
    .then（sortInput（））
    .catch（err =＆gt; {alert（err）}）;
}）;）

この動的 インポート（） 機能JavaScript言語規格でモジュールを動的にインポートする機能を含めるための標準的なストロックの提案の一部です。 WebPackはすでにこの構文をサポートしています。動的インポートの作業方法についてもっと読むことができます記事上で。

the インポート（） ステートメントは解決されるときに約束を返します。 WebPackは、これを別のスクリプト（またはチャンク）に分割する分割点として検討します。モジュールが返されると、 module.default. によって提供されたデフォルトのエクスポートを参照するために使用されます ロード 。約束は別のものと連鎖されています .then（） 呼び出す ソート入力 3つの入力値をソートする方法。約束チェーンの終わりに、 。キャッチ（） エラーの結果として約束が拒否される場所を処理するために呼び出されます。

実際の本番アプリケーションでは、動的インポートエラーを適切に処理する必要があります。単純な警告メッセージ（ここで使用されているものと同様）が使用されているものであり、ユーザーが何かが間違っていたことを知らせるための最良のユーザーエクスペリエンスを提供することはできません。

「解析エラー：インポートとエクスポートは最上位レベルでのみ表示される場合がある」という点で点灯エラーが発生した場合は、これがまだ確定されていない動的インポート構文によるものであることを知っています。 WebPackはそれをサポートしていますが、グリッチで使用されているESLINTの設定（JavaScript Linting Tool）は、まだこの構文を含めるように更新されていませんが、まだ機能します。

私たちがする必要がある最後のことは書くことです ソート入力 私達のファイルの終わりにメソッド。これは、インポートされたメソッドを取り込む関数を返す関数である必要があります。 Lodash.Sortby 。ネストされた関数は3つの入力値を並べ替えてDOMを更新することができます。

 const sortInput =（）=＆gt; {
  戻る（SORTBY）=＆gt。 {
    const値= [
      input1.valueasNumber
      input2.valueasNumber、
      input3.valueAsNumber.
    ]
    const sortedvalues = sortby（値）;
    results.innerhtml = `
      ＆lt; h2＆gt;
        $ {SORTEDVALUES}
      ＆lt; / h2＆gt;
    `
  ;;

数を監視します

さて、最後にアプリケーションをリロードして、ネットワークパネルを密接にしてください。アプリがロードされたときに小さな初期バンドルのみがダウンロードされる方法に注意すべきです。ボタンをクリックして入力番号を並べ替えた後、ソートコードを含むスクリプト/チャンクがフェッチされ実行されます。あなたは彼らが彼らを期待するように、数字がどのように分類されるかを見ますか？

JavaScriptコード分割と遅延ロードは、アプリやサイトの初期バンドルサイズをトリミングするのに非常に便利です。これにより、ユーザーのページ負荷時間が速くなる可能性があります。 Vanilla JavaScriptアプリケーションへのコード分割の追加を検査しましたが、ライブラリまたはフレームワークで構築されたアプリに適用することもできます。

JavaScriptライブラリまたはフレームワークで遅延ロード

多くの人気のあるフレームワークは、動的インポートとWebPackを使用してコード分割と遅延ロードを追加しています。

これは、Reactを使用してムービーの「説明」コンポーネントを遅らせる方法です。 reat.lazy（） コンポーネントが遅延ロードされている間に「ロード中...」フォールバックを提供するためのサスペンス機能）ここに詳細については：

インポート反応、{React 'から{Suspense}。
const説明= react.lazy（（）=＆gt; import（ './ description'））;
関数app（）{
  帰り（
    ＆lt; div＆gt;
      ＆lt; h1＆gt;私の映画

＆lt; suspense fallback = "ロード..."＆gt; ＆lt;説明/ gt; ＆lt; / suspense＆gt; ＆lt; / div＆gt; ）;

コード分割は、ユーザーエクスペリエンスに対するJavaScriptの影響を減らすのに役立ちます。より大きなJavaScriptバンドルがある場合と疑問がある場合は、測定、最適化、および監視を忘れないでください。

この記事はもともと発行317で発行されました ネット Webデザイナーや開発者向けの世界で最も売れている雑誌。 ここに問題317を購入してください または ここで購読する 。

関連記事：

最高のJavaScriptフレームワークの9
15を使用する必要がある15の重要なJavaScriptツール
最高のJavaScript APIの14の14

JavaScriptコード分割について知る必要があるすべて

コード分割はどのような問題を解決しますか？

コード分割に気にする必要がありますか？

助けを得ます

Chrome Developer Toolsのコードカバレッジ

異なる種類のコード分割

コード分割で手を取得します

性能を測定します

あなたのバンドルを最適化します

必要なコードをインポートするだけです

JavaScriptコード分割

数を監視します

JavaScriptライブラリまたはフレームワークで遅延ロード

操作方法 - 最も人気のある記事

キャンバスを伸ばす方法とオイル塗料の設定

映画館4Dのコンセプトアートをモデル化する方法

ARアプリの構築方法

CSSグリッドでレスポートレイアウトを作成する

V-Rayを使って木の木を散布する

要約で完璧なバージョン管理を保つ

映画館4Dで現実的な植物を作る

クリエイティブデザインの短縮を満たす秘密

カテゴリ

JavaScriptコード分割について知る必要があるすべて

コード分​​割はどのような問題を解決しますか？

コード分​​割に気にする必要がありますか？

助けを得ます

Chrome Developer Toolsのコードカバレッジ

異なる種類のコード分割

コード分​​割で手を取得します

性能を測定します

あなたのバンドルを最適化します

必要なコードをインポートするだけです

JavaScriptコード分割

数を監視します

JavaScriptライブラリまたはフレームワークで遅延ロード

操作方法 - 最も人気のある記事

カテゴリ

コード分割はどのような問題を解決しますか？

コード分割に気にする必要がありますか？

コード分割で手を取得します