フロントエンドのビルド時間最適化

フロントエンドのビルド時間を最適化するコアは、冗長な作業を減らし、処理効率を改善し、キャッシュを利用し、効率的なツールを選択することです。 1.包みのある導入と動的な輸入が導入されて包装量を減らすことを確認するために、ツリーの振動とコードセグメンテーションを合理的に使用します。 2。不必要なローダー処理を削減し、node_modulesを除外し、ローダーをアップグレードし、バベルの翻訳範囲をリラックスします。 3.キャッシュメカニズムを使用して、繰り返しの構造を高速化し、Webパックキャッシュを有効にし、キャッシュし、オフラインのインストールを使用します。 4. Vite、Esbuild、Rollupを使用して建設速度を向上させるなど、ツールチェーンをアップグレードしますが、移行コストはありますが、大きな効果があります。

フロントエンドの建設時間に長い時間がかかるため、開発効率は簡単に遅くなります。特にプロジェクトが大きくなった後、各ビルドは数分で始まり、CI/CDプロセスに影響し、ローカルデバッグはそれほどスムーズではありません。ビルド時間を最適化することは、スキルを披露することではなく、開発プロセス全体をより効率的にすることです。

次のポイントは、実際のプロジェクトで比較的効果的な慣行です。すべての人が適用できるわけではありませんが、少なくともいくつかのアイデアを提供できます。

1.ツリーの揺れとコードセグメンテーションを合理的に使用します

Tree Shakingは、デフォルトで最新のパッケージングツール（WebpackやViteなど）でサポートされる関数であり、未使用のコードを自動的に排除できます。しかし、前提は、ESモジュールの形でモジュールを導入するなど、プロジェクト構造と依存関係が「振動」であることです。

• import * as 、必要に応じて紹介してみてください
• ルーティングまたはコンポーネントレベルのコードセグメンテーションに動的インポート（ import() ）を使用します
• サードパーティライブラリもツリーシェーキングをサポートするかどうかを確認してください。一部の古いライブラリは、多くの役に立たないコードをパッケージ化する場合があります。

たとえば、Lodashなどのツールライブラリを使用する場合、 import _ from 'lodash'ライブラリ全体をパッケージ化し、 import debounce from 'lodash/debounce'に置き換えられます。

2。不必要なローダー処理を削減します

Webpackなどのツールは、ローダーを介してさまざまなタイプのファイルを処理しますが、すべてのファイルを多数のローダーで処理する必要はありません。特に、BabelがJSファイルを翻訳する場合、ファイルが多すぎると、建設速度を遅くするのは簡単です。

提案：

• node_modulesディレクトリを除外し、バベルコンピレーションに行かないでください
• URLローダーをアセットモジュールに置き換えるなど、写真、フォントなどのリソースには、より効率的なローダーを使用します（Webpack 5内蔵）
• 古いブラウザと互換性がある必要がない場合は、バベルのターゲット環境を適切にリラックスさせて翻訳を減らします

プロジェクトを構築するとき、バベルが30％以上の時間を占めることがあることがわかります。この時点で、ローダー構成は最適化することで大幅に高速になります。

3.キャッシュメカニズムを使用して、繰り返しの構造を高速化する

ローカル開発であろうとCIの建設であろうと、キャッシュをオンにすると、二次構造の速度が大幅に向上する可能性があります。 WebPack 4は永続的なキャッシュをサポートし、ViteはESBuildとNative ESMをDEVモードで数秒で開始します。

あなたができること：

• cache: trueまたはconfigure filesystemキャッシュ
• Node_Modulesをキャッシュし、CIのキャッシュディレクトリをビルドします（.Vite、Webpack/キャッシュなど）
• YARN/NPMの-Prefer-Offlineパラメーターを使用して、ネットワーク要求を削減します

キャッシュ戦略は、特にCIでシンプルで効果的であり、1つのヒットキャッシュは数十秒以上節約できます。

4.ツールチェーンをアップグレードし、より高速なビルドツールを選択します

これは最優先事項ではありませんが、一部のシナリオでは重要です。たとえば、Viteは開発モードのブラウザネイティブESMに基づいており、パッケージ化する必要はほとんどなく、スタートアップ速度はWebパックよりもはるかに高速です。雪だるまとエスビルドは、非常に速い構造により焦点を合わせています。

プロジェクトで新しいツールを試すことができる場合は、次のことを検討してください。

• 開発モデルをViteに切り替えて、Webpackパッケージングの生産環境を保持します
• Esbuildを使用してTypeScriptまたはJSXを処理し、Babel TSCよりはるかに速く
• ロールアップがライブラリプロジェクトにより適しているかどうかを評価する

もちろん、このステップには特定の移行コストが必要であり、中期再建段階に適しています。

基本的にそれだけです。フロントエンドの建設時間を最適化することは、「より少ない」、「物事を迅速に行う」、「繰り返しのことをする」の中核です。各アイテムは複雑ではないように見えますが、結合すると非常にうまく機能します。

以上がフロントエンドのビルド時間最適化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。