Двустороннее благословение vue3 и Vite, производительность uni-приложения снова улучшена

uni-appправильноvue3 & ViteОбновление — это постепенный процесс:

• Сентябрь 2020 г .: платформа апплета поддерживает разработку vue3, а компилятор платформы апплета по-прежнему использует веб-пакет;
• Май 2021: платформа H5 поддерживает разработку vue3, а компилятор платформы H5 обновлен до Vite;
• Август 2021 г.: платформа приложений поддерживает разработку vue3, а компилятор платформы приложений обновлен до Vite;
• Ноябрь 2021 г .: компилятор платформы Mini Program будет обновлен до Vite;

Уже,uni-appПоддерживается на всех платформахViteскомпилировать иVue 3.xбегать.

Итак, это обновление основной версии, которое длилось год, что именно это делаетuni-appКакие улучшения принес проект?

Пришло время завернуть (показать) волну.

В новой версии платформы uni-app были внесены три основных улучшения:

• Переписать ядро ​​фреймворка: на основеvue3 + tsПерепишите встроенные компоненты и API, чтобы сделать их более тщательными и эффективными.tree-shaking;
• Добавлена ​​поддержка инструмента сборки Vite, обеспечивающего мгновенный предварительный просмотр на платформе H5;
• Добавлена ​​поддержка Vue3.x для достижения более гибких методов разработки и более высокой производительности;

Благодаря этим трем улучшениям проект uni-app получилкак быстро и дешевоЧетыре основных преимущества:

• Больше поддержки синтаксиса, комбинированная поддержка API, ориентация на бизнес и более высокая эффективность разработки;
• Более высокая скорость компиляции, платформа H5 ускорена в десять раз, а апплет и приложение ускорены более чем на 30%;
• Лучшая производительность, более быстрый отклик пользователя и лучший опыт;
• Меньший размер кода, сокращение более чем на 30%, экономия объема и трафика

больше поддержки синтаксиса

новая версияuni-appОн поддерживает платформу Vue 3.x и комбинированный API, что позволяет более целенаправленно развивать бизнес.

Некоторые новые функции Vue 3.x,uni-appОн также полностью поддерживается, например:

• служба поддержки<script setup>
• служба поддержки<style scoped>,<style module>,State-Driven Dynamic CSS(v-bind)
• служба поддержкиjsx,tsx(h5, поддержка платформы приложения, апплет не поддерживает)

Кроме того, на платформе Mini Program новая версияuni-appТакже расширен синтаксис, например:

• Улучшенная поддержка синтаксиса шаблонов (например,class,styleФункции поддержки, переменные и т.д., больше не ограниченные массивами, типами объектов)
• более полныйpropsподдержка (например, передаточные функции)
• более полныйslotподдержка (например, слоты с ограниченной областью действия)

более быстрая компиляция

В повседневной работе разработчиков самое скучное — ждать компиляции и сборки.

Существует также ветка обсуждения «Что делают программисты, когда они ждут компиляции?», которая показывает, насколько неудобно и скучно время компиляции для разработчиков.

uni-appЭто обновлениеvue3 & ViteПосле этого, насколько улучшилось время компиляции? Сколько преимуществ это дает разработчикам? Мы устраиваем реальные тесты, чтобы говорить с данными.

Описание тестовой среды:

硬件：RedmiBook 14 二代
处理器：Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz 
内存：16.0 GB
操作系统：Windows 11 专业版 64 位操作系统

Что касается скорости компиляции, мы провели сравнение по двум параметрам:

• Вертикальное сравнение: выборuni-appОбщие шаблоны проектов, протестированные отдельно на платформах H5, апплетов и приложений.vue 2.6иvue 3.xвремя компиляции
• Параллельное сравнение: используйте другие отличные в отрасли кросс-энд фреймворки, создавайте шаблоны проектов по умолчанию, записывайте время их компиляции иuni-appизvue 3.xверсия для сравнения

Вертикальное сравнение исторических версий uni-app

Мы выбираемuni-app默认模板,uni-starter,hello-uniappТри шаблона проекта, протестированные отдельноvue 2.6иvue 3.xвремя компиляции.

Метод сбора времени компиляции проекта uni-app:

• vue 2.6Время компиляции версии = stats.endTime веб-пакета - stats.startTime
• vue 3.xВремя компиляции версии = запись при входе в инструмент сборки global.__vite_start_time = performance.now(), когда компилируется инструмент сборки: performance.now() - global.__vite_start_time

Платформа H5

правильноuni-appТри шаблона проекта запускаются на платформе H5, несколько раз компилируются и тестируются, после вычисления среднего значения получаются следующие данные:

Отсюда мы можем наблюдать:

• существуетvue 2.6В среде, по мере увеличения сложности проекта, время компиляции, необходимое для предварительного просмотра домашней страницы H5, будет увеличиваться линейно; это связано с тем, чтоvue 2.6версия, хотя предварительно просматривается только домашняя страница, она все равно будет использоватьсяwebpackКомпилировать все ресурсы проекта, следовательно, чем сложнее проект, тем дольше время компиляции;
• существуетvue 3.xВ среде время компиляции предварительного просмотра домашней страницы H5 также связано со сложностью проекта, но увеличение невелико; это связано с тем, что вvue 3.xверсия, использоватьViteBuild, при предварительном просмотре домашней страницы будут компилироваться только домашняя страница и ресурсы, от которых зависит домашняя страница, а другие ресурсы страницы компилироваться не будут.

Сравнивая графики, мы можем интуитивно сделать выводы:vue 3.xВремя компиляции первой страницы в среде в среднем меньшеvue 2.6десятая часть окружающей среды.

Другими словами,vue 3.xСкорость компиляции домашней страницы под версию, по сравнению сvue 2.6версия, сДесятикратное увеличение эффективности.

Это десятикратное повышение эффективности в основном связано с принятием новой версииViteВ качестве инструмента сборки это дает два основных преимущества:

• Используйте собственные файлы ESM, не требующие упаковки, для обеспечения чрезвычайно быстрого запуска службы;
• Предварительный просмотр (выполнение) использованияesbuildВ качестве упаковочного инструмента, по сравнению сvue 2.6окружающая обстановкаwebpack, строит в 10-100 раз быстрее (это не преувеличение, см.esbuild)

с этимДесятикратное увеличение эффективности, ребята, не спешите попробовать?

Мини программная платформа

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

Из сравнительных данных на приведенном выше рисунке можно сделать вывод, что платформа Mini Program,vue 3.xТекущая компиляция под версию, по сравнению сvue 2.6версии производительность компиляции повышается не менее чем на 30 %, и чем сложнее проект, тем очевиднее улучшение производительности компиляции, которое может достигать 40–50 %.

Платформа приложения

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

Из сравнительных данных на приведенном выше рисунке мы можем сделать вывод, что платформа приложений,vue 3.xТекущая компиляция под версию, по сравнению сvue 2.6версии производительность компиляции улучшена почти на 50%.

Хотя это не так захватывающе, как десятикратное увеличение эффективности платформы H5, скорость увеличилась почти на 50%.Друзья, которые часто разрабатывают небольшие программы/приложения, все еще не заинтересованы?

Горизонтальное сравнение лучших фреймворков в индустрии

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

Конкретный план тестирования:

1. УстановитьTaroПоследняя версия cli, используемая в этой статье, — «@Tarojs/Taro»: «3.3.16»
2. использоватьTaro initкоманда, выберите отдельноreact,vue,vue3Framework, создайте три шаблона проекта по умолчанию, три имени проектаtaro3-react,taro3-vue,taro3-vue3,Как показано ниже:
3. использоватьnpm run dev:h5, перейдите на платформу H5 для предварительного просмотра, запишите время компиляции каждого предварительного просмотра, повторите выполнение и найдите среднее значение.

оTaroСхема расчета времени компиляции:

1. разрабатыватьTaroПлагины расширения, справочник по спецификациям плагиновОфициальный сайт Таро — Возможности плагина
2. существуетctx.onBuildStartЗапишите время начала компиляции в
3. существуетctx.onBuildFinishЗапишите время окончания компиляции в
4. Разница во времени между ними — это время, затраченное на процесс компиляции.

затем используйтеuni-appизcliкомандная строка, создать на основеvue3.xпустой шаблон проекта для проекта с именемuni-app-vue3.

Мы используем командные строки соответствующих фреймворков для компиляции 5 проектов, созданных выше, для платформы H5 и платформы апплета соответственно, тестируем их несколько раз и получаем среднее значение.

Время компиляции той же версии фреймворка на платформе H5, результаты следующие:

Как видно из рисунка,uni-appизvue3версия, производительность предварительного просмотра компиляции домашней страницы на платформе H5 намного выше.

Продолжайте компилировать на платформу апплета, тестируйте несколько раз и найдите среднее значение.Результаты следующие:

Как видно из рисунка,uni-appизvue3версии, производительность компиляции на платформе апплета также очень высока.

лучшая скорость бега

Процесс разработки был скомпилирован быстро.Как насчет производительности программного обеспечения, ориентированного на конечного пользователя?

Мы переходим к главе тестирования производительности.

Программа испытаний:

• Контент для разработки: разработка сложного длинного списка, имитирующего домашнюю страницу апплета Weibo, поддержка всплывающего обновления, переворачивания страниц и т. д.
• Интерфейс выглядит следующим образом:

• Тестовая модель: Xiaomi Mi 10 pro, MIUI 12.5 (версия разработки 21.11.3), WeChat версии 8.0.16.
• Подготовка: каждый раз перед запуском теста завершайте каждый процесс приложения и очищайте память, чтобы убедиться, что среда тестовой машины в основном одинакова; каждый раз считывайте статические данные с локального компьютера, чтобы скрыть различия в сети.
• Оценка: для компонента в длинном списке, такого как похожий компонент, могут ли статусы «не нравится» и «нравится» изменяться во времени при нажатии?

Метод определения времени тестирования:

• Выберите микроблог и нажмите кнопку «Нравится», чтобы переключить статус «Нравится» (понравилось выделено, не понравилось серым),
• Например, функция onclick кнопки запускает отсчет времени, функция обратного вызова setData запускает отсчет времени;

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

Количество записей	200	400	600	800	1000
vue2	30ms	43ms	56ms	72ms	90ms
vue3	8ms	9ms	9ms	8ms	9ms

Из таблицы видно, что:

• По мере увеличения записей страниц,vue 2.6версияuni-appДля проектов время отклика компонента «Мне нравится» быстро увеличивается, а отклик становится все медленнее и медленнее;
• на основеvue 3.xизuni-appProject, время отклика подобного компонента не имеет ничего общего с количеством страниц, он всегда поддерживал очень высокую чувствительность отклика, а производительность намного выше, чем уvue 2.6Версия.

Из этого общего эксперимента с откликом компонента длинного списка,vue 3.xОпыт работы намного выше, чемvue 2.6Версия.

меньший размер кода

Объем кода после релиза проекта — очень важный показатель, который нужно учитывать:

• Платформа H5: меньший размер кода может помочь разработчикам сэкономить пропускную способность сервера и трафик CDN, а также ускорить загрузку ресурсов и отрисовку страниц;
• Платформа мини-программы: меньший размер кода, который может ускорить загрузку пакетов мини-программы (может даже избежать громоздкой загрузки подпакетов), помогая пользователям быстрее входить в бизнес-интерфейс мини-программы;
• Платформа приложения: меньший размер кода, обеспечивающий более быстрый запуск приложения и помогающий пользователям быстрее входить на домашнюю страницу приложения.

для тестированияvue 3.xПосле обновления новой версии мы также протестировали изменения размера кода в двух измерениях:

• Вертикальный контраст: выберитеuni-appОбщие шаблоны проектов, протестированные отдельно на платформах H5, апплетов и приложений.vue 2.6иvue 3.xразмер скомпилированного пакета
• Горизонтальное сравнение: используйте другие превосходные кросс-энд фреймворки в отрасли, создайте шаблон проекта по умолчанию, запишите размер его скомпилированного пакета иuni-appверсия для сравнения

Советы:

• На этапе разработки основное внимание уделяется скорости компиляции, соответствующейnpm run devдействовать
• Фаза выпуска фокусируется на размере скомпилированного пакета, соответствующегоnpm run buildдействовать

Вертикальное сравнение разных версий уни-приложения

Мы повторно используем ранее созданныйuni-app默认模板,uni-starter,hello-uniappТри шаблона проекта, протестированные отдельноvue 2.6иvue 3.xТом скомпилированного пакета.

uni-appМетод сбора объема пакета компиляции проекта: После компиляции на соответствующую платформу запишите размер скомпилированной папки.

Платформа H5

Объем кода после компиляции на платформе H5 записывается следующим образом:

Из статистических результатов,uni-appизvue3.xверсии объем компилируемого пакета на платформе H5 должен быть уменьшен не менее чем на 30%.

Оптимизация похудения платформы H5 в основном связана сuni-appНижний уровень фреймворка был полностью переработан для достижения более тщательной оптимизации древовидной структуры.

Мини программная платформа

Скомпилированный объем кода платформы Mini Program записывается следующим образом:

Из статистических результатов,uni-appизvue3.xверсия, есть также значительное сокращение платформы мини-программы.

Платформа приложения

Объем скомпилированного кода платформы приложений записывается следующим образом:

Из статистических результатов,uni-appизvue3.xВерсия, на платформе App, в зависимости от проекта, будет разная степень потери веса.

Теоретически, чем сложнее шаблон страницы в проекте, тем очевиднее эффект похудения от платформы приложений.

Горизонтальное сравнение лучших фреймворков в индустрии

Что касается объема скомпилированного кода, мы также сотрудничаем с превосходной кросс-энд фреймворком.TaroБыло проведено сравнение, и три созданных в предыдущей главе были повторно использованы.TaroПроект компилируется для платформы H5 и платформы апплета соответственно, и рассчитывается размер папки скомпилированного исходного кода.

Как видно из рисунка,uni-appВерсия vue3, объем скомпилированного пакета на платформе H5 самый маленький, всего около одной десятой от того, что есть у друзей.

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

Как видно из рисунка,uni-appВерсия vue3, объем скомпилированного пакета на платформе апплета также наименьший.

**Советы:** Внимательные разработчики обнаружат, что размер пакета кода, скомпилированного в апплет из всех версий фреймворка, намного меньше, чем размер пакета на платформе H5. Это связано с тем, что производитель платформы предоставляет встроенные компоненты и интерфейсы для Однако платформе H5 необходимо реализовать встроенные компоненты и интерфейсы самой кросс-энд фреймворка, поэтому пакет кода платформы H5, как правило, больше.

Суммировать

Таким образом, мы говорим цифрами и объясняем версию vue3.uni-appМногочисленные преимущества развития, чтобы резюмировать:

• больше синтаксиса
• более быстрая компиляция
• беги лучше
• меньше кода

Почему бы вам не перейти на новую версиюuni-appХотите попробовать?

Студенты, у которых есть вопросы о процессе и результатах текстового теста, могут отправить их на github.issue, поправки приветствуются.