Выпуск Uni-App 2.2 значительно повышает производительность на стороне H5.

uni-app

задний план

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

Это также соответствуетuni-appпервоначальное намерение,uni-appПозиционирование используется не только тогда, когда требуется мультитерминальная публикацияuni-app.uni-appэто использованиеvue.jsЕдиный фреймворк для разработки всех интерфейсных приложений. Для фронтенд-инженера используйтеuni-appЭффективнее делать многоканальные, а одноконцевые не проблема,uni-appЕсть также много блестящих мест на каждом конце.

В прошлых итерацияхuni-appОн стал лучшей средой разработки небольших программ, которая имеет больше преимуществ, чем использование собственной разработки WeChat. (ВидетьОценивать)

существуетuni-appuni-appvue.js

  2. Буду использоватьvue.jsЛучше развивать веб-производительность или использовать нативный js для повышения веб-производительности? Ответ: использоватьvue.jsРамка. Почему? Поскольку он автоматически оптимизирует синхронизацию данных и виртуальный дом внизу, он более эффективен, чем код, написанный вручную большинством разработчиков. Аналогичным образом используйтеuni-appКроме того, базовая обработка оптимизации фреймворка более эффективна, чем большинство разработчиков, вручную записывающих setdata или операции DOM.
  3. Многие многотерминальные адаптации выполняются во время компиляции и не влияют на производительность во время выполнения.

Оптимизация сложности

Оптимизировать производительность стороны H5 непросто.

«Полнофункциональный» и «маленький и быстрый» - самые сложные враги для примирения.

Чтобы обеспечить согласованность с несколькими концами,uni-appРеализован набор H5 версии Runtime апплета, который поддерживает компоненты, API и конфигурацию различных апплетов. такuni-appВерсия H5 имеет лучшую кросс-конечную согласованность, чем другие фреймворки.

uni-app

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

Оптимизация

uni-appОн содержит десятки встроенных компонентов и сотни API-интерфейсов. Это «большой и всеобъемлющий» фреймворк, однако разработчики могут не иметь возможности использовать все компоненты и API-интерфейсы при разработке конкретных приложений. Если вы можете удалить неиспользуемые компоненты и API-интерфейсы в соответствии с конкретной ситуацией проекта и оставить полезные для проекта компоненты и API-интерфейсы, вы можете упростить структуру и уменьшить объем. В этом заключается идея «дрожания дерева». оптимизация».

Tree-Shaking, как следует из названия, встряхивает ствол, чтобы стряхнуть мертвые и бесполезные ветки, оставив только полезные ветки. В соответствии с пониманием фреймворка это множество компонентов и API-интерфейсов фреймворка, которые можно использовать по мере необходимости, а неиспользуемые части фреймворка вырезаются. Tree-Shaking был впервые предложен Rollup и принадлежитУстранение мертвого кодаформа.

Обычные интерфейсные фреймворки встряхивают деревья, как правило, на основе явныхimportреферентные отношения. Например, при обращении к библиотеке пользовательского интерфейса компонент поиска библиотеки пользовательского интерфейса используется на странице A. В настоящее время вам нужно написать код js для импорта компонента поиска, поэтому анализ древовидной структуры очень прост.

ноuni-appКак и мини-программы, встроенные компоненты и API-интерфейсы не требуют импорта, что упрощает разработку, но в настоящее время усложняет встряхивание дерева, а встряхивание дерева невозможно выполнить с помощью простого анализа импорта.

К счастью, для команды DCloud анализ синтаксиса AST является навыком ведения домашнего хозяйства.На протяжении многих лет HBuilder был известен своими подсказками синтаксиса js и vue. С помощью анализа АСТ,uni-appНовая версия может точно определить, какие компоненты и API используются этим проектом.

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

  • Компонент: Пройтиvue-template-compilerАнализ из AST, карта, используемая в проекте для генерации списка компонентов, а затем на основе модуля WebPack будет использовать компоненты для создания пакетов
  • babel

uni-appvue.js,vue-route, и некоторые библиотеки полифилла es6. (более подробные сравнения будут позже)

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

Результаты оптимизации

среда сборки

Мы используемvue-cliСоздайтеuni-appШаблон по умолчанию

vue create -p dcloudio/uni-preset-vue my-project

После создания проекта скомпилируйте и сгенерируйте каталог выпуска стороны H5.

npm run build:h5

затем настройтеnginxсервер, указанныйrootкаталог и включитьgzipСжатие, например, выглядит следующим образом:

server {
    ...
    gzip on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_comp_level 4;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    ...
}

динамическое отсечение во время выполнения

Затем через панель «Сеть» Chrome DevTools проверьте размер пакета сетевого запроса домашней страницы перед оптимизацией.Результаты следующие:

Затем включите переключатель оптимизации платформы H5 и повторно проверьте размер пакета сетевого запроса на домашней странице.Результаты следующие:

Видно, что основной каркас фреймворка (chunk-vendors.js) изменился с 162к на 92,8к, а объем сжался на 43%!

На самом деле основная библиотека фреймворка в основном разделена на три части:

  • базовая библиотека vue/vue-router
  • среда выполнения uni-app (реализация компонента и API)

vue/vue-router uni-app runtime Общая сумма
До оптимизации 38k 43k 81k 162k
Оптимизировано 38k 26k 28.8k 92.8k

Tips:

  • Время выполнения универсального приложения сократилось с 81 тыс. до 28,8 тыс., а коэффициент кадрирования достиг 64%.
  • Новый компилятор также динамически сканирует использование es6.Синтаксис es6, используемый в проекте (включая синтаксис es6, используемый средой выполнения uni-app), будет упаковывать только соответствующую реализацию полифилла, поэтому библиотека полифилла es6 была уменьшена с 43 КБ до 26к

время выполнения скрипта

Затем мы проверяем данные о производительности до и после оптимизации через панель производительности Chrome DevTools.Результаты сравнения следующие:

Видно, что время выполнения самого трудоемкого скрипта увеличилось с 227 мс до 154 мс, а время увеличилось на 32%.

как использовать

Хотя внутренняя реализация более сложна,uni-appПростая конфигурация открыта для внешнего мира, и разработчикам нужно только открыть переключатель в файле конфигурации. В частности, в manifest.jsonh5Варианты конфигурации узла следующие:

"h5" : {
    "optimization":{
        "treeShaking":{
            "enable":true //启用摇树优化
        }
    }
}

Другая оптимизированная версия 2.2

существуетuni-apppackage.jsonа такжеvue-config.js

Точно так же компиляция с несколькими подконцами также поддерживается на стороне H5.Например, встроенный H5 в WeChat, встроенный H5 в приложении... могут быть скомпилированы отдельно условно.

Такая гибкая условная компиляция очень полезна для многотерминального выпуска, совместного повторного использования и синхронного обновления набора проектов. Даже если будет разработана только версия H5,uni-appМноготерминальная условная компиляция также обеспечивает более гибкие и мощные инженерные возможности.

Версия 2.2 также может устанавливать стратегии компиляции и копирования для различных статических ресурсов, js и пользовательских компонентов небольших программ. Если ваш предыдущий проект h5 или проект апплета нужно преобразовать в uni-app и вы не хотите перемещать некоторые структуры каталогов, вы можете настроить политики в vue-config.js.

Используйте Uni-App Development H5 и H5 преимущество по сравнению с прямым развитием

На основе непосредственно развивающейся производительности h5 Lacy,uni-appЭто дает разработчикам дополнительные преимущества:

  1. Эффективность разработки uni-app предоставляет большое количество базовых компонентов (фактически небольших программных компонентов), подходящих для мобильных страниц. Также предоставляется компонент расширения uni ui.Рынок плагиновСуществует более 600 плагинов.

Независимо от того, ищут ли разработчики шаблон электронной коммерции или компонент диаграммы, они могут легко его получить. Эффективность разработки лучше, чем когда-либо.

  1. многоконечная компиляция Когда мы разрабатываем H5, нам часто нужно вывести одно в браузер, одно в WeChat и другие суперприложения и одно в наше собственное приложение. Даже разные регионы и разные портреты пользователей будут выводить разные версии. В прошлом разработчики могли только условно скомпилировать часть js и даже должны были создавать несколько репозиториев для обслуживания нескольких версий.

uni-app решает эти проблемы, а его условная компиляция очень гибкая и мощная:

  • Могут ли компоненты, js или css быть выведены платформой компилятора
  • Его также можно скомпилировать с помощью операций «И» и «ИЛИ» на нескольких платформах.
  • В дополнение к коду в файле можно условно скомпилировать весь файл или даже всю директорию.

Например, WeChat, QQ и т. д. используют один и тот же слой рендеринга видео x5 во встроенных браузерах, поддерживающих ядро ​​x5; или вызовите карту WeChat в учетной записи службы WeChat, этот код является только версией, построенной для дистрибутива. Каталог /h5-weixin будет скомпилирован, на других платформах этого кода не будет.

// #ifdef H5-WEIXIN
wx.openCard({
    cardList: [{
        cardId: '',
        code: ''
    }]// 需要打开的卡券列表
});
// #endif

план дальнейших действий

Следующий,uni-appВ конце концов, H5 предоставит механизм рендеринга на стороне сервера (SSR) и адаптер широкоэкранного интерфейса ПК, оптимизированный для продвижения вперед в погоне за экстремальной производительностью и унифицированным способом!

github

Категории