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

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 を応援してくれることを願っています。

以下もご興味があるかもしれません:
  • vscodeを使用してuniappを開発する方法
  • uniapp パッケージ化されたアプレット レーダー チャート コンポーネントの完全なコード
  • uniappを使用してWeChatミニプログラムでEChartsを使用する方法
  • uniappがインターフェースドメイン名を動的に取得する方法を分析する
  • uniapp 要素ノードスタイルの動的変更の詳細な説明

<<:  Ubuntu ベースのディストリビューションに Microsoft TrueType フォントをインストールするチュートリアル

>>:  MySQL の計画タスクとイベント スケジュール例の分析

推薦する

Linux 上でプライベート Git サーバーを構築するための詳細なチュートリアル

1. サーバーのセットアップリモート リポジトリは実際にはローカル リポジトリと何ら変わりなく、純粋...

Dockerコンテナ内にkibanaトークナイザーをインストールする方法

ステップ: 1. 仮想マシンディレクトリに新しいdocker-compose.ymlファイルを作成し...

IE6 および IE7 で DIV コンテナの固定高さを使用するためのヒント

IE6 と IE7 では CSS の解釈に多くの違いがあります。今日はそのうちの 1 つである高さに...

CSSでサウンドを再生するいくつかのテクニック

CSS は、スタイル、レイアウト、プレゼンテーションの領域です。色彩、サイズ、アニメーションが溢れて...

ウェブデザインにおけるテキスト入力ボックスのパラメータの説明

一般的なゲストブック、フォーラムなどでは、テキスト入力ボックスが使われています。これは HTML 言...

CentOS6.7 mysql5.6.33 でデータファイルの場所を変更する方法

問題: MySQL がデータ ファイルを保存するパーティションの容量が小さく、現在いっぱいになってい...

IDEA で Docker プロジェクトをデプロイする手順

現在、ほとんどのプロジェクトが Docker 上にデプロイされ始めていますが、デプロイのプロセスはま...

vue-pdf はオンラインファイルプレビューを実現します

この記事では、参考までに、ファイルのオンラインプレビューを実現するためのvue-pdfの具体的なコー...

mycat を使用して MySQL データベースの読み取りと書き込みの分離を実装する例

MyCATとはエンタープライズアプリケーション開発のための完全にオープンソースの大規模データベースク...

21 の MySQL 標準化および最適化のベスト プラクティス!

序文良い習慣はすべて宝物です。この記事は、SQL の後悔の治療法、SQL パフォーマンスの最適化、S...

vscodeカスタムvueテンプレートの実装

vscode エディタを使用して vue テンプレートを作成すると、新しい vue ファイルを作成す...

MySQL COUNT関数の使用と最適化

目次COUNT 関数は何をするのですか? MyISAMの「魔法」シンプルなCOUNT最適化近似値を使...

ウェブサイト制作におけるオンライン広告の新しいインタラクティブ体験(グラフィックチュートリアル)

インターネット時代が成熟するにつれて、オンライン広告の発展も加速しています。圧倒的な広告収入と完璧な...

Alibaba Cloud Server の詳細な展開 (グラフィック チュートリアル)

最近、Web 開発のフロントエンドとバックエンドの技術を学んだので、その後の管理を容易にするためにプ...

vue-cropperプラグインは、画像キャプチャとアップロードコンポーネントのカプセル化を実現します。

vue-cropperプラグインをベースにした画像キャプチャとアップロードコンポーネントをカプセル...