UniApp は、下請けの読み込みと遅延ページ読み込みのための最適化戦略を実装します。-uni-app-php.cn

UniApp は、下請けの読み込みと遅延ページ読み込みのための最適化戦略を実装します。

PHPz

リリース： 2023-07-05 17:51:45

オリジナル

4564 人が閲覧しました

UniApp は、Vue.js をベースにしたクロスプラットフォーム開発フレームワークで、WeChat アプレット、H5、アプリなどの複数のプラットフォームで同時に実行できます。実際の開発では、アプリケーションの規模が大きくなると、それに応じてページやリソースも増加するため、アプリケーションのパフォーマンスとユーザーエクスペリエンスを向上させるために、下請けロードや遅延ページロードなどの最適化戦略を採用できます。

1. サブパッケージの読み込み

UniApp におけるサブパッケージの読み込みとは、初回読み込み時のパッケージサイズを削減し、初回読み込みを改善するために、アプリケーションの一部のページとリソースを分離することを指します。スピード。 UniApp では、サブパッケージの読み込みは、サブパッケージ事前ダウンロード および 動的サブパッケージを通じて実現できます。

1. サブパッケージの事前ダウンロード

サブパッケージの事前ダウンロードとは、ユーザーがサブパッケージをクリックしたときの読み込み速度を向上させるために、アプリケーションの初期化中にサブパッケージのコンテンツを事前にダウンロードすることを指します。 -パッケージページ。 uni-appのmanifest.jsonファイルで、事前にダウンロードする必要があるサブパッケージのパスを構成できます。コード例は次のとおりです。

{
  "preloadRule": {
    "packages": [
      {
        "root": "pages/subPackage1",
        "name": "subPackage1"
      },
      {
        "root": "pages/subPackage2",
        "name": "subPackage2"
      }
    ]
  }
}

ログイン後にコピー

上の例では、2 つのサブパッケージ subPackage1 と subPackage2 を構成し、それらのルートパスと名前を設定しました。アプリケーションが初期化されると、UniApp はこれら 2 つのサブパッケージのコンテンツを自動的に事前ダウンロードし、ユーザーがページをクリックしたときにページがすぐに読み込まれるようにします。

2. 動的サブコントラクト

動的サブコントラクトとは、アプリケーション実行プロセス中にユーザーのニーズに応じて必要なサブコントラクトを動的にロードすることを指します。動的なサブパッケージ化により、一度に大量のページやリソースをロードすることを回避できます。 UniApp では、uni.requireSubpackage() メソッドを使用して動的サブパッケージ化を実装できます。サンプルコードは次のとおりです。

uni.requireSubpackage({
  root: 'pages/subPackage1',
  success: function(res) {
    // 分包加载成功时的回调函数
    console.log('分包加载成功');
  },
  fail: function(res) {
    // 分包加载失败时的回调函数
    console.log('分包加载失败');
  }
});

ログイン後にコピー

上の例では、uni.requireSubpackage() メソッドを使用して subPackage1 サブパッケージをロードします。サブパッケージのロードが成功すると成功コールバック関数が実行され、サブパッケージのロードが失敗すると失敗コールバック関数が実行されます。

2. ページの遅延読み込み

UniApp でのページの遅延読み込みとは、ページが初めて表示される前に、ページの基本構造と必要なリソースのみが読み込まれ、その他の部分は読み込まれないことを意味します。 -重要なリソースは、ページが表示された後に読み込まれます。ページの遅延読み込みにより、最初の読み込み時のリソース要求が削減され、ページの読み込み速度が向上します。

ページの遅延読み込みを実装するには、uni.lazyLoadComponent() メソッドを使用する必要があります。このメソッドは、実際に使用されるまでコンポーネントの読み込み時間を遅らせることができます。サンプルコードは次のとおりです:

<template>
  <view>
    <lazy-component v-if="showLazyComponent" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      showLazyComponent: false
    };
  },
  mounted() {
    setTimeout(() => {
      this.showLazyComponent = true;
    }, 2000);
  }
};
</script>

ログイン後にコピー

上記の例では、showLazyComponent が true の場合にのみ、lazy-component コンポーネントが読み込まれて表示されます。。ディレイ機能を設定することで、コンポーネントを実際に使用する前にロードすることができます。

3. 概要

下請け読み込みと遅延ページ読み込みの最適化戦略を通じて、UniApp アプリケーションのパフォーマンスとユーザーエクスペリエンスを効果的に向上させることができます。ページコンポーネントの下請けと遅延ロードを合理的に分割することで、最初のロード時のリソース要求を削減し、アプリケーションのロード速度を向上させることができます。開発者は、アプリケーションの特定の状況とニーズに基づいて、実装に適切な最適化戦略を選択できます。上記のコード例は、開発者がサブパッケージの読み込みと遅延ページの読み込みをより適切に実装するのに役立つ参考として使用できます。

以上がUniApp は、下請けの読み込みと遅延ページ読み込みのための最適化戦略を実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。