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

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 ビューのページには、ロジック層とビュー層の分離の概念がありません。 . 当然、通信損失は発生しません
どの属性に継承効果があるかを把握する必要があります (フォントなど)。 , フォントの色と文字サイズは継承され、無意味なコードの繰り返しは禁止されます

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. 起動速度の最適化

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

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

#アプリを小さなプログラムにリリースする場合、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 プラグインを使用しないでくださいサイズ