コード分割を使用することは、H5バンドルの體積を最適化し、負(fù)荷速度を向上させる効果的な方法です。 1.ルーティングレベルの分割により、ページのロードがオンデマンドであることができます。 2。コンポーネントレベルの分割により、怠zyなロード以外のコンポーネントによる初期負(fù)荷が減少します。 3.サードパーティライブラリは、簡(jiǎn)単なキャッシュと再利用のために個(gè)別に分割されます。 4.パッケージングの最適化を?qū)g現(xiàn)するように、SplitchunksまたはlollUpotionsを構(gòu)成します。 5.過剰なコンポーネント、過度の分割、過剰な靜的リソースなどの問題を避けるために注意してください。 6. Webpackバンドルアナライザー、Chrome Devtools、燈臺(tái)を使用して、最適化効果を分析および検証します。合理的な分割により、最初の負(fù)荷速度とページの切り替えの流encyが大幅に改善される可能性があります。

H5ページは、パッケージ化されたバンドルファイルが大きすぎるため、多くの場(chǎng)合、ゆっくりとロードされます。 H5のバンドルボリュームを最適化する最も直接的で効果的な方法の1つは、コード分割を使用することです。これにより、最初のローディング速度が向上するだけでなく、後続のページの切り替えがよりスムーズになります。

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

簡(jiǎn)単に言えば、コード分割は、元の大きなバンドルファイルを複數(shù)の小さなファイルに分割し、オンデマンドでロードすることです。たとえば、ホームページでいくつかの機(jī)能とコンポーネントのみを使用する場(chǎng)合、プロジェクト全體のコードを最初からロードする必要はありません。

一般的な慣行は次のとおりです。

• ルーティングレベルの分割：各ページは個(gè)別にパッケージ化されます
• コンポーネントレベルの分割：特定の非コアコンポーネントの怠zyなロード
• サードパーティライブラリは別々に分割されます：たとえば、パッケージのlodashまたはmomentを個(gè)別に

プロジェクトに実裝する方法は？

Webpack、Vite、または小包などのビルドツールを使用している場(chǎng)合、基本的にコード分割をサポートしており、構(gòu)成を作成するだけです。

ルーティングの分割例（Vue Vueルーターを例にとる）：

 const home =（）=> import（ '../ views/home.vue'）
const about =（）=> import（ '../ views/about.vue'）

const routes = [
  {path： '/'、component：home}、
  {path： '/about'、component：about}
]

この方法で書き込み後、WebpackまたはViteは各ページの獨(dú)立したチャンクファイルを自動(dòng)的に生成し、ページにアクセスすると対応するコードがロードされます。

分割サードパーティライブラリ：

vite.config.jsまたはwebpack.config.jsでsplitChunksを構(gòu)成して、一般的なライブラリを個(gè)別に抽出できます。

 // vite.config.js
建てる： {
  lollUpotions：{
    出力：{
      ManualChunks：{
        ベンダー：['Vue'、 'React'、 'lodash']
      }
    }
  }
}

そうすることで、ユーザーはこれらの安定した不変の依存関係をキャッシュし、重複するダウンロードを減らすことができます。

見落とされやすい場(chǎng)所は何ですか？

多くの人は、開梱する必要があることを知っていますが、無視しやすい詳細(xì)がいくつかあります。

• 非同期にロードされたコンポーネントもサイズを制御する必要があります。怠zyな負(fù)荷が使用されていても、コンポーネント自體が特に大きい場(chǎng)合でも、エクスペリエンスに影響します。現(xiàn)時(shí)點(diǎn)では、さらなる分解または圧縮を考慮する必要があります。
• 過度にスプリットしないでください：あまりにも多くの小さなチャンクがリクエストが多すぎる可能性があり、全體的な負(fù)荷速度が遅くなります。
• 靜的リソースにも注意する必要があります。寫真やフォントなどの靜的リソースが大きすぎる場(chǎng)合、パフォーマンスにも影響します。畫像圧縮、WebP形式などで処理できます。
• 最初の畫面コンテンツの優(yōu)先読み込み：非批判的な部品の読み込みを遅らせるか、スケルトン畫面を使用して構(gòu)造を最初に表示します。

ツールの推奨と検証方法

バンドルが次の方法で適切に分割されているかどうかを確認(rèn)できます。

• Webpackバンドルアナライザー：各モジュールの體積比を視覚的に見る
• Chrome devtoolsネットワークパネル：ロードされているJSファイルの數(shù)とそれぞれの大きさを確認(rèn)してください
• 燈臺(tái)：パフォーマンススコアを?qū)g行して、「特大」のヒントがあるかどうかを確認(rèn)します

プラグインをインストールするか、數(shù)行のコマンドを追加して、すぐに表示します。

 npmインストール -  save-dev webpack-bundle-analyzer

次に、構(gòu)成內(nèi)でビルド分析を?qū)毪筏茖g行します。

 const {bundleanalyzerplugin} = require（ 'webpack-bundle-analyzer'）;

プラグイン：[
  新しいbundleanalyzerplugin（）
]

基本的にそれだけです。コード分割は、フロントエンドのパフォーマンスの最適化の基本的な操作であり、複雑ではありませんが、見過ごされがちな詳細(xì)です。分解が合理的に改善されている限り、負(fù)荷速度は大幅に改善されます。

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