コード分割をマスターする: JavaScript アプリケーションの読み込み時間を短縮する-jsチュートリアル-php.cn

コード分割をマスターする: JavaScript アプリケーションの読み込み時間を短縮する

WBOY

リリース： 2024-08-30 19:06:57

オリジナル

424 人が閲覧しました

Mastering Code Splitting: Unlocking Faster Load Times for Your JavaScript Applications

Web アプリケーションが成長するにつれて、JavaScript バンドルのサイズがアプリケーションのパフォーマンスに大きな影響を与える可能性があります。バンドルが大きいとロード時間が遅くなる可能性があり、バンドルが大きくなるにつれてロード時間も長くなります。ありがたいことに、この問題の解決に役立つコード分割と呼ばれる手法があります。それが何なのか、そしてそれをプロジェクトにどのように実装できるのかを詳しく見てみましょう。

コード分割とは何ですか?

コード分割を使用すると、JavaScript バンドルをより小さな部分に分割し、オンデマンドでロードできるようになります。アプリケーション全体を一度にロードするのではなく、現在のユーザー操作に必要なコードのみをロードし、実際に必要になるまで他のコードのロードを延期します。これにより、ロード時間を大幅に短縮できます。

なぜこれが重要なのでしょうか?

正直に言うと、何かをロードしようとして時間がかかりすぎて終了してしまうということは誰しもあるでしょう。読み込み時間が短縮されると、ユーザーエクスペリエンスが向上します。コード分割は、機敏で応答性の高いエクスペリエンスを提供することでユーザーの関与を維持するのに役立ちます。ユーザーが関与すると、サイトに留まり、コンテンツを探索し、サービスをチェックアウトする可能性が高くなります。

次に、すべてのコードが 1 つのファイルにバンドルされている大規模なアプリケーションがあると想像してください。このアプリケーションが使用されるたびに、その時点で機能の一部しか使用されていない場合でも、バンドル全体がロードされます。これは非常に非効率的であり、アプリケーションの速度が低下します。コード分割を実装すると、初期のバンドルサイズが小さくなり、読み込みが高速化されます。その時点で使用されているコードのみが取り込まれ、残りは呼び出されるのを待機します。

コード分割はどのように機能するのでしょうか?

Webpack や Rollup などのバンドルツールがツリーシェーキングを実装する方法と同様に、JavaScript ファイルも 1 つ以上の出力ファイル (通常は「チャンク」と呼ばれます) にバンドルされます。これらのチャンクは必要に応じてロードできます。ここでコード分割が機能します。以下では、動的インポートとルートベースの分割を使用したコード分割の実装について説明します。

動的インポート

コード分割を実装する最も簡単な方法の 1 つは、動的な import() ステートメントを使用することです。静的インポートとは異なり、動的インポートでは、必要な場合にのみモジュールをロードできます。以下に例を示します:

import('./module').then(module => {
  module.doSomething();
})

ログイン後にコピー

この場合、module.js は、アプリケーションの最初のロード時ではなく、import ステートメントの実行時にのみロードされます。これにより、実際に必要になるまでコードの読み込みを延期できます。

ルートベースの分割

シングルページアプリケーション (SPA) の場合、ルートベースのコード分割は優れたアプローチです。これにより、ユーザーが移動するルートに応じて、さまざまなコードのチャンクを読み込むことができます。 React アプリケーションでは、React.lazy と React.Suspense を使用すると、これは非常に簡単に実行できます。以下に例を示します:

const Home = React.lazy(() => import(‘./Home’));

const About = React.lazy(() => import(‘./About’));

function App() {

    return (

        <Router>

            <Suspense fallback={<div>Loading…</div>}>

                        <Route path=”/home” component={Home} />

                        <Route path=”/about” component={About} />

            </Suspense>

        </Router>

    );

}

ログイン後にコピー

この例では、Home コンポーネントと About コンポーネントは、ユーザーがそれぞれのルートに移動するときにのみロードされます。これにより、追加のコードがオンデマンドでロードされるため、最初のバンドルが小さくなります。

コード分割のベストプラクティス

コード分割がバンドルサイズに与える影響を理解することが重要です。 Webpack Bundle Analyzer などのツールは、バンドルの構造を視覚化し、最適化すべき領域を特定するのに役立ちます。

ロード時間をさらに最適化するには、プリロードとプリフェッチの使用を検討してください。これらのテクニックを使用すると、ブラウザーに事前に特定のリソースを読み込むようにヒントを与えることができます。以下はその例です:

<link rel="preload" href="/static/js/home.chunk.js" as="script">
<link rel="prefetch" href="/static/js/about.chunk.js">

ログイン後にコピー

プリロードでは、重要なリソースができるだけ早くロードされるようにしますが、プリフェッチでは、近い将来に必要になる可能性のあるリソースがロードされます。

結論

コード分割は、アプリケーションのパフォーマンスを大幅に向上させ、ユーザーエクスペリエンスを向上させる強力な最適化手法です。必要なときに必要なコードのみをロードすることで、初期ロード時間を短縮し、ユーザーの関心を維持できます。プロジェクトにコード分割を実装することは、より高速で効率的な Web アプリケーションを構築するための重要なステップです。

これが役立つと思われた場合は、私の 週刊ニュースレター の購読を検討してください。そこでは、私があなたのような他の何百人もの開発者がこの分野でレベルアップし、進歩するのを支援します。実を言うと、より良いスキル = より多くのお金が得られます!