Как мы получили 100% результативность Lighthouse для нашего приложения Vue.js

1. Бегущий маяк
2. Первая остановка: размер пачки
3. Gutting moment.js: 1,75 МБ -> 1,58 МБ
4. Потеря кода: 1.58MB -> 1.05MB (!)
5. Удаление полного кода: 1.05Mb -> 1019.82KB
6. Выборочный импорт начальной загрузки: 1019,82 КБ -> 934,75 КБ
7. Вторая остановка: разделение кода
8. Бегущий маяк снова
9. Заключение

С момента запуска мы не обращали слишком много внимания на производительность основного веб-приложения Checkly. Позор нам. Что может быть лучше для этого, чем публикация превосходного Стоимость Javascript в 2018 году Адди Османи от Google?

TL; DR: в нашем приложении Vue.js потребовалось около полдня, чтобы перейти от ужасных 34 к 100 очкам Lighthouse.

В статье Османи рассказывается о том, почему важна производительность в Интернете и на мобильных устройствах, какое отношение к этому имеет Javascript и какие проблемы существуют в отношении мобильных устройств, типов устройств, циклов рендеринга, загрузки и т. Д. Прочтите его, если вы не знакомы с этими темами. Суть это:

1. Javascript - самая дорогая часть производительности вашего сайта. Не изображения, не CSS.
2. Более быстрые сайты увеличивают доход.
3. Оптимизация JavaScript для повышения производительности - это многоэтапный процесс, ориентированный на аудиторию и устройство.

Если вы жаждете большего, прыгайте на высокопроизводительный браузер Илья Григорик (также в Google) для более глубокого знания этой темы.

Бегущий маяк

Чтобы узнать текущую производительность приложения Checkly, я запустил Маяк на экране входа в систему. Lighthouse - это инструмент аудита производительности, встроенный в каждый браузер Chrome.

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

Маяк работал со следующими настройками для оптимизации для целевой аудитории:

• Устройство: настольное. Использование мобильного телефона или планшета на самом деле не является фактором (пока?) Для текущей аудитории Checkly.
• Аудиты: показатели. Другие варианты - SEO, доступность и т. Д. Мы заинтересованы только в производительности здесь.
• Дросселирование: не дросселирование. Checkly - это приложение B2B, DevOps. 99% пользователей будут использовать его в офисе. Производительность 3G и 4G не так уж важна.

Обратите внимание, что настройки устройства и регулирования имеют значение для сайта и блога, которые вы сейчас читаете. По крайней мере 25% посетителей checklyhq.com находятся на мобильном телефоне.

Мы провели тест, и результаты говорят сами за себя. Оценка 34. Много красных букв и предупреждающих знаков. Довольно ужасно 😞

Некоторые «основные моменты»:

• Первая значимая краска занимает более 6 секунд.
• Процессор занят на целую секунду дольше.

Первая остановка: размер пачки

У меня было ноющее чувство, что количество Javascript, которое мы отправляли, было «неоптимальным». Webpack имеет большой Bundle Analyze Плагин, который говорит вам, что именно вы упаковываете (и отправляете). Быстрая установка NPM и пара строк в конфигурации Webpack:

npm i -D webpack-bundle-analyzer const BundleAnalyzerPlugin = require ('webpack-bundle-analyzer'). BundleAnalyzerPlugin ... плагины: [новый BundleAnalyzerPlugin ()] ...

Это запустит браузер после каждой сборки и покажет вам что-то похожее на это:

Да. Это всего 2,01 МБ (несжатого) javascript, который поставляла Checkly. Это далеко от 170 КБ сжатых / 0,7 МБ несжатых файлов, что рекомендуется в статье о стоимости Javascript.

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

Сначала мы атаковали файл vendor.js .

Gutting moment.js: 1,75 МБ -> 1,58 МБ

Moment.js - отличная библиотека для обработки даты и времени. Он поставляется с полным набором файлов локали. Мы не используем ничего в нашем приложении. К сожалению, нет возможности установить их по желанию, и получается мы не единственные, кто немного раздражен этим , Мы избавились от локали, используя встроенный плагин Webpack Ignore:

плагины: [новый webpack.IgnorePlugin (/^\.\/ locale $ /, / moment $ /)]

Потеря кода: 1.58MB -> 1.05MB (!)

Codemirror используется на экране редактирования проверки браузера в приложении Checkly. Как и в случае с Moment.js, он поставляется с целым набором стилей и тем кода, которые мы не используем. К счастью, уже была тонкая оболочка Vue.js для уменьшенной установки Codemirror, которая называется VueCodeMirrorLite , После незначительных изменений кода и отдельной установки темы Monokai и стиля кода Javascript мы сэкономили почти 0,5 МБ!

Удаление полного кода: 1.05Mb -> 1019.82KB

Быстрое сканирование кода показало, что мы использовали только четыре метода Lodash (clonedeep - это золото). Мы отказались от полной установки и просто установили методы, которые мы фактически использовали. Слава людям Lodash за поддержку этого.

Выборочный импорт начальной загрузки: 1019,82 КБ -> 934,75 КБ

Части пользовательского интерфейса используют Vue.js-ified версию Bootstrap, которая называется Bootstrap Vue , Просто импортировав модули из библиотеки, которую мы используем (модалы, всплывающие подсказки, навигация и т. Д.), Мы получили комплект vendor.js размером менее 1 МБ.

Вторая остановка: разделение кода

Чтобы атаковать файл app.js , мы посмотрели на разделение кода. Идея разделения кода состоит в том, что вы используете нужное количество JavaScript в нужный момент, используя вызовы XHR. Это означает, что для загрузки полной версии приложения не требуется больших первоначальных затрат. Это должно привести к более быстрому времени для первой краски и последующего взаимодействия.

Эта замечательная статья на разделение кода в Vue.js описывает мелкие мелочи. Суть это:

1. Вы хотите использовать компоненты, «Один файл» или нет. (в Checkly мы используем отдельные .pug и .scssfiles)
2. Вы хотите использовать Webpack. Прочтите упомянутую статью о том, как это настроить. Если вы используете Vue-CLI для запуска приложения Vue, у вас все хорошо.
3. Вы хотите разделить по маршруту. Существуют и другие варианты, но это, безусловно, самый простой и имитирующий традиционные (не SPA) сайты, запрашивая ресурсы для навигации по страницам.

Я был приятно удивлен, что буквально единственными изменениями, необходимыми в нашем приложении, был список операторов import в нашем файле router.js. Это может работать не для всех, но в приложении Checkly каждый маршрут аккуратно отображается на один компонент master / container

Это:

import Login from './components/authentication/login' import Registration from './components/authentication/signup' ...

Становится так:

const Login = () => импорт ('./ компоненты / аутентификация / логин') const Registration = () => импорт ('./ компоненты / аутентификация / регистрация') ...

Теперь вы эффективно меняете стандартный импорт из операторов в специальные операторы import () Webpack, обеспечивая разделение и асинхронную загрузку ваших компонентов. Ваш код назначения маршрута даже не меняется:

маршруты: [{путь: '/ логин', имя: 'логин', компонент: логин}, {путь: '/ регистрация), имя:' регистрация ', компонент: регистрация} ...

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

Бегущий маяк снова

Мы были очень довольны уменьшением размера пакета и тем, насколько легко было реализовать разбиение кода. Мы не были готовы к огромному влиянию, которое это имело. Снова запустив Lighthouse - те же настройки, что были упомянуты выше - нарисовал совершенно другую картину: счет 100 и зеленый текст везде! Вот Это Да!

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

домашняя панель приборов

проверить результаты

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

Заключение

Приведенные выше оптимизации заняли от 4 до 6 часов, чтобы их внедрить, протестировать и развернуть. Большая часть этого времени была потрачена на незначительные изменения кода для оптимизации используемых модулей и библиотек. Время хорошо проведено!

Просто не забудьте работать в итерациях, где вы

1. Таргетинг на область.
2. Оптимизация.
3. Измерьте результаты.
4. GOTO 1.

изображение баннера: «Скоростной туннель» Секино Дзюнъитиро (конец 20 века) - Ukiyo.org

Похожие

Комментарии