JavaScriptアプリケーションのペイロードサイズをどのように削減できますか？

JavaScriptアプリケーションがゆっくりとロードされ、パフォーマンスが低い場合、問題はペイロードが大きすぎることです。ソリューションには以下が含まれます。1。コード分割を使用し、React.lazy（）またはビルドツールを介して大きなバンドルを複数の小さなファイルに分割し、最初のダウンロードの量を減らすために必要に応じてロードします。 2。未使用のコード（ツリーの揺れ）を削除し、ES6モジュールメカニズムを使用して「死んだコード」をクリアして、導入されたライブラリがこの機能をサポートしていることを確認します。 3.リソースファイルを圧縮してマージし、GZIP/BrotliとTerserがJSを圧縮できるようにし、ファイルを合理的にマージし、静的リソースを最適化します。 4.頑丈な依存関係を交換し、day.js、fetch、preate、view cdnまたはbundlephobiaなどの軽量ライブラリを選択して、より効率的なリソース管理を実現します。

もちろん。 JavaScriptアプリケーションがロードが遅く、実行が貧弱であることがわかった場合、「ペイロードが大きすぎる」という場合に問題があります。簡単に言えば、ユーザーの量をダウンロードして解析する必要があるコードの量が多すぎるため、スタートアップ速度が低下します。この問題を解決するために、実際には多くの実用的な方法があり、以下は最も一般的で効果的です。

1.コード分割を使用します

最新のフロントエンドフレームワーク（ReactやVueなど）はすべて、コード分割をサポートします。コアのアイデアは、大きなバンドルを複数の小さなファイルに分割し、オンデマンドでロードすることです。

たとえば、Reactでは、 React.lazy() Suspense怠zyな負荷コンポーネントに使用できます。

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

これの利点は、ユーザーが初めて訪問したときにアプリケーション全体のコードをダウンロードする必要がないことです。現在のページの必要な部分をダウンロードするだけでよいです。ユーザーが他のページに移動すると、対応するモジュールが動的にロードされます。

ヒント：Webpack、Vite、その他の構造ツールは、コードを自動的に分割するのに自動的に役立ちますが、ルーティングまたはモジュールの分割が合理的であり、「オンデマンド」が「分解される」ことを許可しないようにする必要があります。

2。未使用のコードを削除（ツリーの揺れ）

多くのプロジェクトが多数のサードパーティライブラリを導入していますが、機能のごく一部のみが使用されています。役に立たないコードのこの部分は「死んだコード」であり、クリアする必要があります。

Tree Shakingは、パッケージング中に未使用のエクスポートモジュールを識別および削除できる最適化手法です。前提は、これらのライブラリがES6のimport/export構文を使用する必要があり、CommonJSはそれほど友好的ではないことです。

たとえば、あなたは書いた：

 'lodash'から{debounce}をインポートします。

関数を使用するだけの場合、パッケージツールはロダッシュ全体ではなく、この関数に関連するコードのみを保持できます。

提案：

• ツリーシェーキングをサポートするライブラリを使用することが優先されます（たとえば、LodashにはすでにESMバージョンがあります）
• import * as _ from 'lodash'のような執筆方法を使用しないでください

3。リソースファイルを圧縮してマージします

圧縮は新しいことではありませんが、多くの人はその重要性を無視しています。一般的な慣行は次のとおりです。

• GZIPまたはBrotli圧縮を有効にする（サーバー側の構成）
• Webpack/Terserを使用してJSファイルを圧縮します（変数名の短縮、コメント削除など）
• 複数のJSファイルを1つにマージします（コード分割が不要な場合）

たとえば、Webpackでの圧縮を有効にするのは非常に簡単であり、TerserPluginは通常、デフォルトで有効になります。

最適化： {
  最小化：本当、
}

さらに、写真やフォントなどの静的リソースも全体的なペイロードに影響する可能性があることに注意してください。それらを一緒に最適化することを忘れないでください。

4.重い依存関係を交換します

ペイロードが大きい理由が非常に直接的である場合があります。重い依存関係パッケージを使用します。例えば：

• day.jsの代わりにmomems.jsを使用します（瞬間は前者のほぼ2倍です）
• フェッチの代わりに完全なaxiosを使用します（多くの機能がありますが、重いです）
• UIコンポーネントライブラリを導入するときは、オンデマンドでロードするのではなく、完全にインポートします

ソリューションも簡単です。オンデマンドをロードするための軽量の代替品を見つけます。例えば：

• 反応をプアクト（小さい）に置き換える
• UNPKGのようなCDNを使用して、モジュールサイズを表示します
• bundlephobiaを使用して、npmパッケージの真のボリュームを表示します

基本的にそれだけです。 JSペイロードを減らすことは難しくありません。重要なのは、ユーザーが実際に必要とするコードと、開発および建設段階でこれらのコンテンツを制御する方法を理解することです。いくつかの方法は最初は面倒に思えるかもしれませんが、長期的にはパフォーマンスとユーザーエクスペリエンスに非常に役立ちます。

以上がJavaScriptアプリケーションのペイロードサイズをどのように削減できますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。