uniapp プロジェクトの最適化方法と提案

1. 複雑なページデータ領域をコンポーネントにカプセル化する

シナリオ：

たとえば、プロジェクトには次のようなフォーラム ページが含まれています。いいね アイコンをクリックすると、いいねの数がすぐに 1 増加し、ページ レベルのすべてのデータが js レイヤーからビュー レイヤーに同期され、ページ全体のデータが更新されるため、クリックの遅延やフリーズが発生します。

最適化計画:

複雑なページの場合、特定の領域のデータを更新するときは、その領域をコンポーネントにして、データの更新時にこのコンポーネントのみが更新されるようにする必要があります。

注: app-nvue と h5 にはこの問題はありません。違いが生じる理由は、アプレットが現在コンポーネントの違いを更新するためのメカニズムのみを提供しており、すべてのページの違いを自動的に計算できないためです。

2. 大きな画像の使用を避ける

シナリオ：

ページで大量の大きな画像リソースが使用されている場合、ページの切り替えが停止し、システム メモリが増加し、白い画面がクラッシュすることもあります。また、大きなバイナリ ファイルの base64 変換もリソースを大量に消費します。

最適化計画:

使用前に画像を圧縮し、大きな画像の使用は避け、必要に応じてスプライトまたは SVG の使用を検討してください。簡単なコードで目的の結果が得られた場合は、画像を使用しないでください。

3. ミニプログラムとアプリはサブパッケージ内のページを多すぎるほど処理する

設定を確認するには、公式ウェブサイトのマニュアルをご覧ください。

4. 画像の遅延読み込み

機能説明:
この機能は、WeChat ミニプログラム、アプリ、Baidu ミニプログラム、ByteDance ミニプログラムでのみ有効です。デフォルトで有効になっています。設定を確認するには、uView マニュアルを参照してください。

5. ローカルストレージの悪用を禁止する

ローカル ストレージを乱用しないでください。ローカル ページ間でパラメータを渡すには URL を使用します。ローカル ストレージを使用してデータを渡す場合は、標準化された方法で名前を付け、必要に応じて破棄する必要があります。

6. 変数は外部で定義できる

uni-app では、data で定義されたデータは、変更されるたびにページを再レンダリングするようにビュー レイヤーに通知します。そのため、変数がビューで必要ない場合は、data で定義できます。変数を外​​部で定義するか、vue インスタンスに直接マウントして、リソースの無駄を省くことができます。

7. ページのレンダリングを最適化するためにデータを一括で読み込む

シナリオ：
ページが初期化されると、ロジック層は一度に大量のデータをビュー層に渡し、ビュー層は一度に多数のノードをレンダリングすることになり、通信が遅くなり、ページの切り替えが停止する可能性があります。

最適化計画:
ページを部分的に更新してレンダリングします。たとえば、サーバーが 100 個のデータを返す場合、一度に 50 個ずつバッチで読み込むことができ、次の読み込みは 500 ミリ秒後に実行されます。

8. ビュー層とロジック層の間の頻繁な通信を避ける

• スクロール ビュー コンポーネントのスクロール イベント監視を減らします。スクロール ビュー コンポーネントのスクロール イベントを監視すると、ビュー レイヤーはロジック レイヤーに頻繁にデータを送信します。
• scroll-view コンポーネントのスクロール イベントを監視する場合、scroll-top / scroll-left プロパティをリアルタイムで変更しないでください。スクロールを監視する場合はビュー レイヤーがロジック レイヤーと通信し、scroll-top / scroll-left を変更する場合はロジック レイヤーがビュー レイヤーと通信するため、通信が滞るおそれがあります。
• onPageScroll の使用に注意してください。onPageScroll がリッスンしているとき、ビュー レイヤーはロジック レイヤーに頻繁にデータを送信します。
• アニメーションのインターフェースを操作するためにJSタイマーを使用する代わりに、より多くのCSSアニメーションを使用します。
• キャンバスでハンドトラッキング操作を行う必要がある場合は、アプリ側ではrenderjsを使用し、ミニプログラム側ではweb-viewコンポーネントを使用することをお勧めします。web-viewのページにはロジック層とビュー層の分離という概念がないため、当然通信ロスは発生しません。

9. CSSの最適化

フォント、フォントの色、テキスト サイズなど、どのプロパティが継承された効果を持つかを知る必要があります。意味のないコードを繰り返さないでください。

10. 絞りと手ぶれ補正を有効活用する

画像安定化:
関数を実行する前に n 秒間待機します。待機期間中に再度トリガーされた場合、待機時間は再初期化され、調整されます。
トリガー イベントは n 秒以内に 1 回だけ実行されます。n 秒が経過していない場合、次のトリガーは無効になります。

11.ページ切り替えアニメーションを最適化する

シナリオ：
ページが初期化されると、大量の画像やネイティブコンポーネントのレンダリングと大量のデータ通信が発生します。新しいページのレンダリングとフォーム入力アニメーションがリソースを競合し、ページの切り替えが停止したり、フレームがドロップしたりします。

最適化計画:

• 画像や複雑なネイティブコンポーネントをレンダリングする場合は 100 ミリ秒～ 300 ミリ秒遅延し、データ通信をバッチで実行して一度にレンダリングされるノードの数を減らすことをお勧めします。
• アプリ側のアニメーション効果はカスタマイズできます。ポップイン/ポップアウトデュアルウィンドウリンク押し出しアニメーション効果は、より多くのリソースを消費します。アニメーション中にページが時間のかかるjsを実行している場合、アニメーションのフレームがドロップされる可能性があります。この場合、slide-in-right / slide-out-rightなどのリソースの消費が少ないアニメーション効果を使用できます。
• App-nvueとH5は、ページプリロード、uni.preloadPageもサポートしており、より優れたユーザーエクスペリエンスを提供できます。

12.背景色をフラッシュホワイトに最適化する

シナリオ：
新しいページに入ると、背景が白く点滅します。ページの背景が暗い場合、新しいフォームは Vue ページで灰色がかった白の背景でアニメーションを開始し、アニメーションが終了すると暗い背景に変わり、フラッシュ スクリーンが発生します。

最適化計画:

App.vue でスタイルを記述すると、ページ スタイルのレンダリングが高速化されます。App.vue のスタイルはグローバル スタイルです。新しいページが開かれるたびに、最初に App.vue のスタイルが読み込まれ、次に通常の vue ページのスタイルが読み込まれます。

アプリは、pages.jsonのページのスタイルでページのネイティブ背景色を個別に設定することもできます。たとえば、globalStyle->style->app-plus->backgroundでグローバル背景色を設定します。

"スタイル": { "アプリプラス": { "背景":"#000000" } }

nvueページにはこの問題はなく、nvueページに変更することもできます

13. 起動速度を最適化する

• 背景画像やローカルフォントファイルなど、プロジェクトコードが増えるほどサイズが大きくなり、ミニプログラムの起動速度に影響します。サイズの制御に注意する必要があります。
• アプリ側のスプラッシュ画面には白画面検出機構があります。ホームページが常に白の場合や、ホームページ自体が空の転送ページの場合、スプラッシュ画面が閉じるまでに10秒かかることがあります。
• アプリが v3 コンパイラを使用し、ホームページが nvue ページであり、高速起動モードに設定されている場合、この時点でアプリは最も速く起動します。

アプリは純粋なnvueプロジェクトとして設定されます（マニフェストのapp-plusの下でrenderer: "native"を設定します）。この種類のプロジェクトは、アプリケーション全体でネイティブレンダリングを使用し、Webviewに基づくフレームワークをロードしないため、起動が速く、2秒で起動できます。

14. パッケージサイズを最適化する

• uni-app をミニプログラムにリリースする場合、es6 から es5 へのコンパイルや css のアライメント機能を使用するとコードサイズが大きくなる場合があります。これらのコンパイル機能を有効にするかどうかを設定できます。
• uni-app の H5 側では、uni-app はツリー シェイキング最適化メカニズムを提供します。ツリー シェイキング最適化前の uni-app の全体的なパッケージ サイズは約 500k で、サーバー上で gzip 展開後は 162k になります。ツリーシェイクの最適化を有効にするには、マニフェストで設定する必要があります。
• uni-appのアプリ側、Android基本エンジンは約9Mです。アプリは、マップ、Bluetoothなどの拡張モジュールも提供します。これらのモジュールがパッケージ化中に必要ない場合は、配布パッケージを減らすために切り取ることができます。サイズはmanifest.json-Appモジュールの権限で選択できます。
• アプリは、純粋なnvueプロジェクトを選択した場合（マニフェストのapp-plusの下でrenderer："native"を設定）、パッケージサイズをさらに約2M削減できることをサポートしています。
• HBuilderX 2.7以降、アプリ側で非v3コンパイルモードが削除され、パッケージサイズが3M減少しました。

15. 外部jsプラグインの悪用を禁止する

説明する：
公式 API がある場合は、プロジェクト サイズを増やすために追加の js プラグインを追加しないでください。例:
URL を暗号化するには、encodeURIComponent() と decodeURIComponent() を使用します。

ユニアプリプロジェクトの最適化方法と提案に関するこの記事はこれで終わりです。ユニアプリプロジェクトの最適化に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。皆様が今後も 123WORDPRESS.COM を応援してくれることを願っています。