ホームページ  >  記事  >  ウェブフロントエンド  >  WeChatのパフォーマンスを2倍にするuni-appのトリック

WeChatのパフォーマンスを2倍にするuni-appのトリック

coldplay.xixi
coldplay.xixi転載
2020-09-28 16:18:262266ブラウズ

WeChatのパフォーマンスを2倍にするuni-appのトリック

#関連する学習の推奨事項: WeChat ミニ プログラム開発チュートリアル

# #複数のデモンストレーションと数か月にわたる研究開発により、
Vue

最下層の一部を書き換え、uni-app フレームワークを再構築し、WeChat エンド の 2 倍のパフォーマンスを達成しました。 Vue 構文 サポートの詳細。 背景

uni-app

は、初期段階で mpvue から学び、WeChat アプレットとの迅速な互換性を実現しました。オープンソースのチーム コミュニティへの貢献!

uni-app

を使用する開発者が増えるにつれて、ビジネスの複雑さは増大し続けており、多くの開発者が uni-app でサポートされている vue 構文について不満を抱いています。一部のシナリオでの問題 (特にページ上に複雑なコンポーネントがある場合)。これらの問題は、実際には mpvue の実装メカニズムによって引き起こされます。簡単に説明するために、複雑なコンポーネントのパフォーマンスの問題を例に挙げてみましょう。 mpvue/wepy などのフレームワークが誕生したとき、WeChat アプレットはまだカスタム コンポーネントをサポートしておらず、コンポーネントで開発できませんでした。この問題を解決するために、mpvue/wepy はユーザーが作成した Vue コンポーネントをクリエイティブにテンプレートにコンパイルしました。 WXML は、コンポーネント開発機能を偽装して実現し、コードの再利用性を向上させるもので、当時の技術状況では優れた技術的ソリューションでした。ただし、このソリューションでは、Vue コンポーネント内のデータもページ内のデータにコンパイルされ、コンポーネントへのデータ更新でもパス マッピングに基づいて

Page.setData

が呼び出されます。特に、多くのコンポーネントと大量のデータを含むページでは、各コンポーネントのローカル更新がページ レベルでグローバル更新をトリガーするため、パフォーマンスのオーバーヘッドが膨大になります。 WeChat によって後に起動されたカスタム コンポーネントは、実際にはコンポーネント レベルでの部分更新をサポートしています。検証の結果、コンポーネント レベルでのデータ更新は、ページ上のグローバル更新と比較してパフォーマンスが大幅に向上することがわかりました。

さらに、

mpvue

Vue レイヤーで実行される vnode 比較とデータ diff は完全には計算されていないため、パフォーマンス。 こうした理由から、私たちはWeChatのフレームワーク書き換え作業を開始しました。

新バージョンの機能

パフォーマンスが 2 倍になりました

新バージョン

uni-app

基盤となる Vue.js の一部を調整および書き換えました

ミニプログラムのカスタム コンポーネントに基づく
    Vue.js
  • のコンポーネント ベースの開発の実装
  • Vue
  • レイヤーキャンセル vnodeと比較して、より詳細な
  • diff
  • 計算が行われ、setData()より通信データ量が少なくなります
  • 新しいフレームワークの書き換え 最後に、次のテスト モデルを構築しました。

リスト インターフェイスを構築します。各リスト項目はカスタム コンポーネントです。
  • プルアップの読み込みにより、それぞれのデータ更新がトリガーされます。静的データを取得し、ネットワークの差分をシールドします。
  • データ更新の開始タイミングとページのレンダリング完了タイミングの終了をトリガーし、その時間差を比較指標として求めます(消費時間、単位はミリ秒です)
  • ##次に、それぞれ新旧のフレームワークを使用して、同じ携帯電話 (vivo nex) で複数のテストを実行し、平均を求め、次の結果を取得します。

コンポーネントの数古いフレーム (mpvue)## 200 204ms129ms400280ms139ms180ms196ms
新しいフレーム
##800 341ms
1000 653ms

テスト データから判断すると、新しいフレームワークのパフォーマンスは複雑なページで 2 倍になっています。特に、より多くのデータとより複雑なコンポーネントを含むページでは、パフォーマンスの向上がさらに大きくなります。

ヒント: 現在主流のいくつかのクロスエンド フレームワーク (taro、wepy、chameleon など) でパフォーマンス テストも実施しました。uni-app の実行スコア結果も同様に注目に値します。 -キャッチング. テストコードとテスト結果は近々公開され、皆さんが判断できるようになる予定ですので、ご期待ください。

Vue 構文のサポートの追加

また、より多くの Vue 構文をサポートするために uni-app コンパイラも強化されました。詳細は次のとおりです:

  • フィルターのサポートフィルター
  • #より複雑な
  • JavaScript レンダリング式のサポート
  • #テンプレートでのサポート
  • 関数の使用methodsSupport
  • v-html
  • (rich-textの分析と同じ)コンポーネントサポートネイティブイベント
  • @tap.native
  • エクスペリエンス メソッド

現在、新しいフレームワークは WeChat やその他の小規模なプログラムやアプリで開発されています。コンパイラはまだ古いバージョンです。私たちはグループのベータ版をリリースし、開発者を WeChat で早期に体験するよう招待しました。

開発者は次のように

vue-cli

を作成し、uni-app プロジェクトを作成し、コンパイルして WeChat アプレットにリリースします。と新しいバージョン

古いプロジェクトに影響を与えないように、

uni-appグループ テスト バージョンには現在、新しいフレームワークと古いフレームワークの両方が組み込まれており、古いフレームワークは開発者はこれを構成できます manages.json

->

mp-weixin -> usingComponentsこのノードは、次のように新しいコンパイル フレームワークを有効にします。

# npm script# 全局安装vue-cli$ npm install -g @vue/cli# 创建uni-app项目,会提示选择项目模板,初次接触建议选择 hello uni-app 模板$ vue create -p dcloudio/uni-preset-vue my-project# 进入项目目录$ cd my-project# dev 模式,编译预览$ npm run dev:mp-weixin# build 模式,发行打包$ npm run build:mp-weixin复制代码
新しい Vue 構文を使用する場合は、H5 と WeChat のみがこれらの新しい構文をサポートしていることに注意してください。他のプラットフォームにコンパイルする場合は、条件付きコンパイルを使用する必要があります。 ヒント:

カスタム コンポーネントの互換性を確保するには、WeChat 開発者ツールを実行するときに WeChat 基本ライブラリを最新バージョンに設定することをお勧めします。

新しいフレームワークを体験する際、ご質問やご提案がございましたら、github に問題を送信してください。

  • 現状と今後について
  • 春節が終わったら、
  • uni-app
バージョン 1.6 がリリースされ、ByteDance ミニ プログラム プラットフォームのサポートが追加されました。この時点で、一連のコードと 7 エンドのリリースが達成されました。 7 つの端末には、アプリ (iOS/Android)、ミニ プログラム (WeChat/Alipay/Baidu/Bytedance)、H5 プラットフォームが含まれます。下の図を参照してください:

大量開発開発者uni-app コミュニティには熱狂的なユーザーが集まりました。現在、数十の uni-app 交換グループがあります。下の写真は 500 人が参加する QQ 交換グループです。グループは作成後 2 日で満員となりました。開発者の熱意が伝わってきます。 。

WeChatのパフォーマンスを2倍にするuni-appのトリック

WeChatのパフォーマンスを2倍にするuni-appのトリック

現在、新しく作成されたユニアプリ プロジェクト (テスト プロジェクトを含む) が毎日数千件作成されています。 10,000 件を超えるケースがあり、その一部は uniapp.dcloud.io/case で見つけることができます。 WeChatのパフォーマンスを2倍にするuni-appのトリックTaro
や他のフレームワークの WeChat ミニ プログラム ケースと比較して、
uni-app

クロスエンド ケース ははるかに豊富です。 小規模プログラムのクロスエンド フレームワークの中で、uni-app はおそらく、最大のユーザー数と最も豊富なクロスエンド ケースを持つフロントエンド フレームワークです。

最近、

Vue マルチターミナル開発エコシステムを活性化するために、uni-app

mpvue が共催するプラグイン開発コンペティションが開催されました。 チームが正式に始まりました!開発者は積極的に参加してください。ホイールを作ってコミュニティに貢献しながら、賞品を獲得することもできます (iPhone 次に、uni-app チームは引き続きフルスピードで実行し、次の側面を迅速に改善します。

uni-app の新しいフレームワークは次のと互換性があります。その他のプラットフォームuni-ui クロスターミナル UI ライブラリの改良

#システム パフォーマンス エクスペリエンスを向上させるために、アプリ側にさらにネイティブ レンダリングを導入
    ##周囲のエコロジーがさらに改善されます。
  • 「開発者のために生まれた」はスローガンではなく、ポジショニングです。
  • uni-app
  • チームは今後も開発の問題点を解決し、開発者の開発効率を向上させていきます。

その他の優れた記事については、

uni-app

列にご注目ください~

以上がWeChatのパフォーマンスを2倍にするuni-appのトリックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はjuejin.imで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。