Новая реконструкция, Uni-App удваивает производительность WECHAT

внешний интерфейс uni-app

После многих споров и месяцев исследований и разработок мы переписываем частиVueнижний слой, рефакторингuni-appФреймворк, который реализует сторону WeChatДвойная производительность и больше синтаксиса Vueслужба поддержки.

задний план

uni-appзаимствовано в началеmpvue, чтобы добиться быстрой совместимости апплета WeChat, поблагодарите команду Meituan Dianping за их вклад в сообщество открытого исходного кода!

с использованиемuni-appРазработчиков становится все больше и больше, а сложность бизнеса продолжает расти, и многие разработчики жалуютсяuni-appПоддерживается мало синтаксиса vue, а в некоторых сценариях возникают проблемы с производительностью (особенно при наличии сложных компонентов на странице).Эти проблемы на самом деле вызваныmpvueВ результате механизма реализации мы кратко проиллюстрируем проблему производительности сложных компонентов на примере.

В начале рождения таких фреймворков, как mpvue/wepy, апплет WeChat не поддерживалПользовательские компонентыНевозможно сделать разработку с модифицированными компонентами; MPVUE/WEPY для решения этой проблемы, творческие компоненты VUE, написанные пользователями, компилируются в WXMLшаблон, в замаскированном виде реализует возможности компонентной разработки и улучшает возможность повторного использования кода, что является отличным техническим решением в технических условиях того времени. Однако это решение также вызывает компиляцию данных в компоненте Vue в данные на странице, и обновление данных компонента также будет вызываться на основе сопоставления пути.Page.setData. Особенно на страницах со многими компонентами и большим объемом данных локальное обновление каждого компонента приведет к глобальному обновлению на уровне страницы, что приведет к огромным потерям производительности.

WeChat был запущен позжепользовательский компонент, На самом деле он поддерживает локальные обновления на уровне компонентов.После проверки мы обнаружили, что обновление данных на уровне компонентов имеет значительное улучшение производительности по сравнению с глобальным обновлением страницы.

Кроме того,mpvueна слое VuevnodeСравнение и данныеdiffНеполный расчет также будет потреблять некоторую производительность.

По этим причинам мы начали работу по переписыванию фреймворка на стороне WeChat.

Новые особенности

Удвойте производительность

Новыйuni-appСкорректированные и переписанные частиVue.jsБазовая реализация в основном включает в себя:

После того, как новый фреймворк был переписан, мы построили следующую тестовую модель:

  • Создайте интерфейс списка, каждый элемент списка является настраиваемым компонентом
  • Установка загрузки DRIGGERS UPDATE DATA, читает статические данные из локальных каждый раз, и экраны сетевых различий
  • Имеет время времени обновления данных, рендеринг страницы завершен, и разница во времени должна сравниться как показатель сравнения (потребление времени, единица в миллисекундах)

Затем используйте новую и старую платформы соответственно, проведите несколько тестов на одном и том же мобильном телефоне (vivo nex), найдите среднее значение и получите следующие результаты:

количество компонентов Старый фреймворк (mpvue) новая структура
200 204ms 129ms
400 280ms 139ms
800 341ms 180ms
1000 653ms 196ms

Судя по тестовым данным, производительность нового фреймворка удвоилась на сложных страницах! Особенно для страниц с большим количеством данных и более сложных компонентов, чем больше улучшение производительности!

Советы: мы также провели тест производительности для нескольких популярных кросс-энд фреймворков (таких как taro, wepy, chameleon и т. д.), и результаты работы uni-app также бросаются в глаза. так что следите за обновлениями.

Дополнительная поддержка синтаксиса Vue

Мы также улучшилиuni-appКомпилятор, который поддерживает больше синтаксиса Vue, как показано ниже:

  • фильтр поддержкиfilter
  • поддерживать более сложныеJavaScriptвыражение выражения
  • поддержка вtemplateвнутреннее использованиеmethodsфункционировать в
  • служба поддержкиv-html(такой жеrich-textанализ)
  • Компоненты поддерживают встроенную привязку событий, например:@tap.native

путь опыта

На данный момент разработка нового фреймворка завершена на стороне WeChat, а компиляторы других мини-программ и приложений пока остаются старой версии. Мы выпустили групповую бета-версию и пригласили разработчиков испытать ее на WeChat.

Разработчик создает его следующим образомvue-cliИ создайте проект uni-app, скомпилируйте и раздайте его в апплет WeChat:

# 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

Переключение между старой и новой версиями

Чтобы не затрагивать старый проект,uni-appГрупповая бета-версия в настоящее время имеет две встроенные платформы, новую и старую, причем по умолчанию используется старая платформа.manifest.json -> mp-weixin -> usingComponentsNode включает новую структуру компиляции следующим образом:

// manifest.json
{
	// ...
	/* 小程序特有相关 */
	"mp-weixin": {
		"usingComponents":true //启用新框架编译，默认为false
	}
}

Если вы используете новый синтаксис vue, обратите внимание, что этот новый синтаксис поддерживают только H5 и WeChat.При компиляции на другие платформы используйте условную компиляцию.

Советы:

  • Чтобы обеспечить совместимость пользовательских компонентов, рекомендуется установить последнюю версию базовой библиотеки WeChat при запуске в инструменте разработчика WeChat.
  • Когда вы познакомитесь с новым фреймворком, если у вас есть какие-либо вопросы или предложения, отправьте их на github.issue

Текущее состояние и будущее

После Праздника Весныuni-app1.6, новый байт, превосходящий поддержку небольшой программной платформы; здесь реализуйте набор кода, 7-сторонний выпуск! 7-сторонняя включает: приложение (iOS / Android), апплет (WeChat / Alipay / Baidu / byte beating), платформу H5, см. ниже:

Приток большого количества энтузиазвых разработчиков Uni-App сообществу, существуют десятки единомышленников Uni-App Exchange, следующая картина показывает группу Exchange 500 QQ, создает группу, полную энтузиазм, которая находятся два дня, которые можно увидеть.

В настоящее время каждый день создаются тысячи проектов uni-app (включая тестовые проекты) с более чем 10 000 случаев.uniapp.dcloud.io/case. а такжеTaroПо сравнению со случаем универсального апплета WeChat в фреймворке,uni-appизКроссовый корпусгораздо богаче.

В кросс-энд фреймворке апплетаuni-appВозможно, самый используемый интерфейсный фреймворк с наибольшим количеством кросс-эндов.

В последнее время для активногоVueМноготерминальная экология развития, авторuni-appа такжеmpvueСоревнование по разработке плагинов, совместно организованное командой, официально стартовало! Приглашаем всех разработчиков принять активное участие. Делая колеса и принося пользу сообществу, вы также можете выиграть еще один приз (iPhone Xs Max, дисплей 4K и другие призы), и вы можете выиграть больше одним махом ^_^,Нажми для деталей.

Следующий,uni-appКоманда будет продолжать работать на полной скорости и быстро улучшаться в следующих областях:

  • Новый фреймворк uni-app совместим с другими платформами.
  • Улучшение кросс-энд UI библиотеки uni-ui
  • Внедрите больше нативного рендеринга на стороне приложения, чтобы повысить производительность системы.
  • Окружающая экология дополнительно улучшается, например, отраслевые шаблоны, кросс-энд статистика и т. д.

«Рожден для разработчиков» — это не слоган, а позиционирование.

uni-appКоманда, как всегда, решит болевые точки разработки и повысит эффективность разработки для разработчиков!

Категории