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

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 の一部を調整および書き換えました

ミニプログラムのカスタムコンポーネントに基づく

のコンポーネントベースの開発の実装
レイヤーキャンセル vnodeと比較して、より詳細な
計算が行われ、setData()より通信データ量が少なくなります

リストインターフェイスを構築します。各リスト項目はカスタムコンポーネントです。

プルアップの読み込みにより、それぞれのデータ更新がトリガーされます。静的データを取得し、ネットワークの差分をシールドします。
データ更新の開始タイミングとページのレンダリング完了タイミングの終了をトリガーし、その時間差を比較指標として求めます(消費時間、単位はミリ秒です)

コンポーネントの数古いフレーム (mpvue)## 200 204ms129ms400280ms139ms180ms196ms

新しいフレーム

	##800	341ms
	1000	653ms
	テストデータから判断すると、新しいフレームワークのパフォーマンスは複雑なページで 2 倍になっています。特に、より多くのデータとより複雑なコンポーネントを含むページでは、パフォーマンスの向上がさらに大きくなります。ヒント: 現在主流のいくつかのクロスエンドフレームワーク (taro、wepy、chameleon など) でパフォーマンステストも実施しました。uni-app の実行スコア結果も同様に注目に値します。 -キャッチング. テストコードとテスト結果は近々公開され、皆さんが判断できるようになる予定ですので、ご期待ください。 Vue 構文のサポートの追加また、より多くの Vue 構文をサポートするために `uni-app` コンパイラも強化されました。詳細は次のとおりです: フィルターのサポート`フィルター` #より複雑な JavaScript `レンダリング式のサポート` #テンプレートでのサポート関数の使用`methods`Support 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 日で満員となりました。開発者の熱意が伝わってきます。。現在、新しく作成されたユニアプリプロジェクト (テストプロジェクトを含む) が毎日数千件作成されています。 10,000 件を超えるケースがあり、その一部は uniapp.dcloud.io/case で見つけることができます。 Taro や他のフレームワークの WeChat ミニプログラムケースと比較して、 uni-app のクロスエンドケース `ははるかに豊富です。` `小規模プログラムのクロスエンドフレームワークの中で、`uni-app はおそらく、最大のユーザー数と最も豊富なクロスエンドケースを持つフロントエンドフレームワークです。最近、 Vue `マルチターミナル開発エコシステムを活性化するために、`uni-app と mpvue が共催するプラグイン開発コンペティションが開催されました。 `チームが正式に始まりました!開発者は積極的に参加してください。ホイールを作ってコミュニティに貢献しながら、賞品を獲得することもできます (iPhone` `次に、`uni-app `チームは引き続きフルスピードで実行し、次の側面を迅速に改善します。` uni-app の新しいフレームワークは次のと互換性があります。その他のプラットフォームuni-ui クロスターミナル UI ライブラリの改良 #システムパフォーマンスエクスペリエンスを向上させるために、アプリ側にさらにネイティブレンダリングを導入 ##周囲のエコロジーがさらに改善されます。「開発者のために生まれた」はスローガンではなく、ポジショニングです。 uni-app チームは今後も開発の問題点を解決し、開発者の開発効率を向上させていきます。その他の優れた記事については、 uni-app 列にご注目ください~