uniapp プロジェクトを最適化するにはどうすればよいですか?いくつかの最適化計画と提案を共有する

uniapp プロジェクトを最適化するにはどうすればよいですか?次の記事では、uniapp プロジェクトの最適化方法と提案をいくつか紹介します。

はじめに: パフォーマンスの最適化は古くから最優先事項であり、uniapp プロジェクト最適化メソッドの最も包括的なコレクションは開発に応じて追加されます。状況

1. 複雑なページデータ領域がコンポーネントにカプセル化されている

シナリオ:

たとえば、プロジェクトには同様のものが含まれています。フォーラム ページ: 点のようなアイコンをクリックすると、「いいね！」の数がすぐに 1 になります。これにより、JS レイヤーからビュー レイヤーまでページ レベルですべてのデータの同期がトリガーされ、ページ全体のデータが更新されます。クリックの遅延とラグの原因

##最適化計画:

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

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

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

シナリオ:

ページ内で多数の大きな画像リソースが使用されていると、ページ切り替えの遅延が発生し、システム メモリが増加したり、白い画面がクラッシュしたりする可能性があります。大きなバイナリ ファイルの Base64 化も非常にリソースを大量に消費します

#最適化計画:

# 使用前に画像を圧縮してください。大きな画像は避け、必要に応じて検討してください。 スプライト画像または SVG。単純なコードで実現できる場合は、画像を使用しないでください。

3. ミニ プログラムと APP 下請け処理ページが多すぎます

公式 Web サイトのマニュアルにアクセスして構成を確認してください

4画像の遅延読み込み

関数の説明:

この関数は WeChat アプレット、アプリ、Baidu ミニ プログラム、ByteDance ミニ プログラムにのみ有効であり、デフォルトで有効になっています

uView マニュアルにアクセスして構成を確認してください

5. ローカル ストレージの悪用は禁止されています

Donローカル ストレージを悪用しないでください。ローカル ページ間でパラメータを転送するには URL を使用してください。データの転送にローカル ストレージを使用する場合は、命名規則を使用し、オンデマンドで破棄する必要があります。

6. 変数を定義できます。

ユニアプリでは、data で定義されたデータが変更されるたびに、ビュー レイヤにページを再レンダリングするように通知されるため、ビューで必要な変数でない場合は、データ内で定義する必要はありません。リソースの無駄を避けるために変数を外部で定義するか、vue インスタンスに直接マウントしてください

7. データをバッチでロードしてページ レンダリングを最適化します

シナリオ:

ページが初期化されると、ロジック層が一度に大量のデータをビュー層に送信するため、ビュー層は大量のデータをレンダリングします。ノードを一度に実行すると、通信速度の低下やページ切り替えの遅れが発生する可能性があります。

最適化計画:

ページを部分的に更新してページをレンダリングします。たとえば、サーバーが応答を返した場合などです。 100 個のデータ、一度に 50 個ずつバッチでロードでき、次のロードは 500ms 後に実行されます

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

スクロール ビュー コンポーネントのスクロール イベント監視を減らします。スクロール ビューを監視する場合、スクロール イベントが発生すると、ビュー層は頻繁にロジック層にデータを送信します。

• スクロール ビュー コンポーネントのスクロール イベントをリッスンするときは、スクロールトップ/スクロール左プロパティをリアルタイムで変更しないでください。スクロールを監視するときにビュー レイヤーが通信するためです。ロジック層とスクロールトップ / スクロール左を変更すると、ロジック層がビュー層と通信するため、通信ラグが発生する可能性があります。 、ビュー層は頻繁にロジック層にデータを送信します。

• JS タイマー操作インターフェイスを通じてアニメーションを実行する代わりに、より多くの CSS アニメーションを使用します

• キャンバスでフォローアップ操作を行う必要がある場合は、アプリ側で renderjs を使用し、アプレット側で Web ビュー コンポーネントを使用することをお勧めします。Web ビューのページには、ロジック層とビュー層の分離の概念がありません。 . 当然、通信損失は発生しません
9. CSS の最適化

• どの属性に継承効果があるかを把握する必要があります (フォントなど)。 , フォントの色と文字サイズは継承され、無意味なコードの繰り返しは禁止されます

10. スロットリングと手ぶれ補正を上手に活用しましょう

手ぶれ補正:

関数を実行するまで n 秒待機します。待機期間中に再度トリガーされると、待機時間が再初期化されます。

スロットル:

トリガー イベントはn秒以内に1回のみ実行され、n秒経過していない場合、再度トリガーされると無効になります

11. ページ切り替えアニメーションの最適化## ＃＃＃＃＃＃＃シナリオ：＃＃＃＃＃ ＃

ページの初期化時に大量の画像やネイティブコンポーネントの描画、大量のデータ通信が行われるため、新規ページの描画やフォーム入力のアニメーションによるリソースの奪い合いが発生し、ページ切り替えのラグやフレーム落ちが発生します。 .

最適化計画 ：

• 画像や複雑なネイティブコンポーネントのレンダリング、バッチでのデータ通信は100ms～300ms遅延することを推奨一度にレンダリングされるノードの数を減らすため

• アプリ側のアニメーション効果はカスタマイズ可能ですが、popin/popout のデュアルフォームリンケージ押し出しアニメーション効果はより多くのリソースを消費します。アニメーション中にページ上で時間のかかる js が実行されると、アニメーションがコマ落ちする可能性があります。このとき、右にスライドイン/右にスライドアウトするなど、リソース消費の少ないアニメーション効果を使用できます。

• #App-nvue と H5、およびページのプリロードのサポート

  uni.preloadPage により、より優れたユーザー エクスペリエンスを提供できます

12. 背景色を白く点滅するように最適化します

## シーン:

新しいページに入るとき、背景が白く点滅します。背景が暗い場合、vue ページで、最初にアニメーションを開始したときに新しいフォームの背景が灰白色になり、アニメーションが終了すると灰色に変化することが発生する可能性があります。背景が暗いため、スプラッシュ スクリーンが発生します。

最適化計画:

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

• #アプリ側もページ内で使用可能ネイティブ背景の設定ページの色を .json ページのスタイルで個別に設定します。たとえば、globalStyle->style->app-plus->background

• "style": { "app-plus": { "background":"#000000" } }

  ## でグローバル背景色を構成します。

#nvue ページにはこの問題はありませんが、nvue ページに変更することもできます

• ##13. 起動速度の最適化

##プロジェクトのコードが増えるほど、背景画像とローカル フォント ファイルが大きくなり、ミニ プログラムの起動速度に影響します。サイズの制御に注意する必要があります

アプリ側のスプラッシュ時の白画面検出をオフにするメカニズム。ホームページが常に白である場合、またはホームページ自体が空の転送ページである場合、スプラッシュが閉じるまでに 10 秒かかる場合があります
アプリが v3 コンパイラーを使用し、ホームページが nvue ページであり、
• 高速起動モード

  に設定されている場合、この時点でアプリは最速で起動します

• アプリは純粋な nvue プロジェクトに設定されています (マニフェストの app-plus の下にレンダラーを設定: "ネイティブ")、この種のプロジェクトは起動が速く、2 秒で開始できます。ネイティブ レンダリングを使用し、Webview ベースのフレームワークをロードしません

#14. パッケージ サイズを最適化します

#アプリを小さなプログラムにリリースする場合、es6～es5やcssのアライメント機能を使用するとコードサイズが大きくなる可能性がありますが、これらのコンパイル機能を有効にするかどうかはH5側で設定できます。 uni-app. uni-app はツリーシェイク最適化メカニズムを提供します. ツリーシェイク最適化前の uni-app の全体のパッケージボリュームは約 500k、サーバーが gzip をデプロイした後は 162k です。ツリーシェイキングの最適化を有効にするには、

manifest で

• uni-app のアプリ側を設定する必要があります。Android の基本エンジンは約 9M です。アプリには次の機能もあります。マップや Bluetooth などの拡張モジュール。パッケージ化するときにこれらのモジュールが必要ない場合は、それらを切り取って配布パッケージを減らすことができます。サイズは、manifest.json-App モジュールのアクセス許可で選択できます。

• アプリのサポート 純粋な nvue プロジェクトを選択した場合 (マニフェストの app-plus でレンダラーを「ネイティブ」に設定)、パッケージ サイズをさらに約 2M 削減できます
  アプリ側が HBuilderX 2.7 を実行した後、アプリ側は非 v3 コンパイル モードを削除し、パッケージ サイズは 3M

• ##15 減少します。外部 JS プラグインの使用は禁止されています

• #説明:

• 公式 API がある場合、プロジェクトを増やすために追加の JS プラグインを使用しないでくださいサイズ

例:

Url は encodeURIComponent() と decodeURIComponent() を直接使用してパスワードを渡します

推奨: "

uniapp チュートリアル"

以上がuniapp プロジェクトを最適化するにはどうすればよいですか?いくつかの最適化計画と提案を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。