задний план
В связи с непрерывным ростом бизнеса компании в последнее время пользователи всегда сообщали, что торговый центр в приложении компании открывается медленно ……, поэтому для компании и для себя я начал путь оптимизации.
Система торгового центра была разработана в прошлом году и представляет собой спа-проект, основанный на vue 2.0.Конечно, лучшая идея оптимизации - сотрудничать со студентами, использующими мобильные терминалы, для ее гибридизации, но период времени слишком велик, трансформация слишком велика. , а по прошествии года ушла и часть местных мобильных студентов, что привело к нехватке кадров, поэтому им пришлось трансформироваться.
Похожие серии статей:
Начинать
Эта статья посвящена оптимизации первого экрана и говорит только об оптимизации первого экрана.Во-первых, давайте посмотрим, как выглядит первый экран, когда он полностью загружен.
Диаграмма шага нагрузки
Сначала нажмите на торговый центр в нижней панели родного приложения, чтобы перейти на страницу H5, На данный момент это выглядит так.
затем после1-2sЧерез некоторое время (без кеша) вы увидите следующую анимацию загрузки,
затем загрузка2-3sполностью загружены слева и справа
Общее время загрузки составляет3-5sо.
1. Оптимизация перед входом на страницу h5
Время белого экрана здесь - это в основном инициализация мобильного веб-просмотра и загрузка статических ресурсов H5, Здесь есть четыре точки оптимизации:
1. Глобальный веб-просмотр
метод:
Когда клиент только запускается, глобальный WebView инициализируется для использования и скрывается;
Когда пользователь получает доступ к WebView, непосредственно используйте WebView для загрузки соответствующей веб-страницы и ее отображения.
Этот метод может эффективно сократить первое время открытия веб-просмотра в приложении. Когда пользователь посещает страницу, нет необходимости инициализации времени веб-просмотра.
Это требует сотрудничества мобильных студентов.
2. Оптимизация упаковки внешнего кода
В первую очередь нам нужно посмотреть, какие вещи загружаются на первом экране, самые важные — это те, которых у приложения и вендора сотни тысяч.
Затем начните анализировать, почему файл такой большой, выполните
npm run build --reportЗатем вы увидите картинку, похожую на эту (это очень мощно~)
(Картинка найдена в интернете, а картинка анализа проекта не использовалась. Боюсь, что директор скажет, что исходники будут слиты~)
Потом я увидел, что есть какие-то пакеты lodash и moment и какие-то сторонние плагины в vendor.js.Это все ямки, оставленные ленивыми в то время, так что я могу написать их все сам, и удалить объем некоторых сторонних пакетов. Затем лениво загрузите некоторые пакеты, которые не используются на домашней странице, и больше не помещайте их в глобальную ссылку.
Другими способами оптимизации громкости являются:
tree-shaking: удалить неиспользуемый код
UglifyJsPlugin: Сжать код
ExtractTextPlugin: извлечь css
Они использовались ранее, и их нет в этой задаче по оптимизации, поэтому я не буду вдаваться в подробности, вы можете сами проверить использование плагина.
3.pwa
Здесь рекомендуется использовать оффлайн-плагин для веб-пакетов. Подробное использование см. в этой статье:
Используйте оффлайн-плагин с веб-пакетом, чтобы легко внедрить PWA
На этот раз pwa в основном используется для автономного кеша, который аналогичен HTTP-кэшу, но этот кеш относительно более управляем.
4. Анимация загрузки движется вперед
Теперь анимацию загрузки можно увидеть только после загрузки статических ресурсов H5.Также есть время белого экрана в середине оптимизации статических ресурсов H5, поэтому мы добавили анимацию загрузки в мобильный терминал и убрали анимацию загрузки H5.Используется каркасный экран, который описан ниже.
2. Оптимизация после входа на страницу h5
Здесь после загрузки статического ресурса h5 вы увидите анимацию загрузки, что вы делаете во время анимации загрузки? Запрос интерфейса A, запрос интерфейса B после возврата интерфейса A и запрос интерфейса B после возврата... Здесь есть четыре точки оптимизации:
1. Скелетный экран
При входе на страницу сначала загрузите плейсхолдер экрана каркаса, а затем перейдите к заполнению данных.
Наш каркасный экран написан нами самими, а также мы можем использовать плагины
vue-skeleton-webpack-plugin
Использование можно увидеть здесь:
Добавить каркасный экран в проект vue
2. Некоторые внешние запросы заменены запросами внутренней сети на стороне сервера.
Например, такой интерфейс, как информация о пользователе, первоначально получил информацию о пользователе после внешнего запроса, а затем использовал информацию о пользователе для запроса данных страницы, связанных с пользователем.Однако в некоторых местах, где сеть нестабильна, последовательный интерфейс интерфейса легко замедляется, его нужно запрашивать снова, поэтому такая работа перемещается на сервер и напрямую становится интерфейсом внутрисетевого вызова, на который не влияет сетевая среда клиента.
3. Разделите интерфейс, отрисуйте страницы в пакетном режиме и кэшируйте некоторые данные интерфейса в локальном хранилище.
Чтобы поторопиться с интерфейсом данных на предыдущей домашней странице, все данные возвращаются одним интерфейсом, поэтому бэкенду нужно проверять много таблиц.На этот раз мы разделяем один интерфейс на несколько интерфейсов, загрузка и заполнение партиями, а товар классификация и т. д. Данные, которые меняются реже, кэшируются в локальном хранилище на внешнем интерфейсе, после входа на страницу данные отображаются в локальном хранилище, а затем динамически обновляются.
Сначала получите общие данные домашней страницы, которые не нужно различать пользователей, и кешируйте кэшируемые, а в следующий раз используйте интерфейс напрямую.
Затем данные, относящиеся к пользователю, также возвращаются, а затем отображаются в пакетном режиме.
Окончательный оптимизированный результат:
Нет времени белого экрана, скелетный экран H5 виден после собственной анимации загрузки в течение 1 с, а загрузка всех данных завершается в течение 2 с.
Общая скорость оптимизирована с исходных 3-5с до 1-2с.Если есть ситуация с кешем, то его можно открыть за секунды.Конечно есть и другие места которые можно оптимизировать.После завершения оптимизации будет быть добавлено.
Почему бы не использовать vue-ssr для оптимизации первого экрана
Некоторые студенты комментировали и спрашивали, почему vue-ssr не используется для оптимизации первого экрана.Для оптимизации я оптимизирую рендеринг на стороне сервера, когда у меня будет время.Когда изменения будут завершены, я снова поделюсь статьей по оптимизации о спа-миграции ssr ~
Наконец
На самом деле формулы оптимизации производительности нет.Ее все равно нужно анализировать по конкретным проектам.Точки оптимизации и методы оптимизации у каждого проекта разные.Не может быть только жесткой и жесткой.
Это первая статья по оптимизации мобильного спа молла.В дальнейшем я расскажу о своем личном опыте по оптимизации скорости упаковки webpack, оптимизации упаковки кода, оптимизации анимации и других аспектах этого проекта.Если вам понравилось, пожалуйста нравится~.
(Оригинальная аранжировка статьи, пожалуйста, укажите источник для перепечатки, спасибо~)