Оптимизация Nuxt.js приложения

Просмотров 853
Сложность:

Среди основных преимуществ javascript-фреймворков: скорость работы приложения и возможность полного контроля над кодом. Тем не менее, можно умудриться подключить кучу плагинов ради решения одной простейшей задачи, которая требуется только на 1 странице. Всё это приведет к долгой загрузке страниц, медленной работе приложения. Что нужно сделать, что такого не случилось?

Чем проверять

В Nuxt.js есть встроенный webpack, а с ним и анализатор сборки приложения, который можно запустить командой в консоли: npx nuxt build -a.

Можно наглядно посмотреть, из каких конкретно файлов состоит ваше собранное приложение. Если parsed размер приложения больше 1 мегабайта, то это повод задуматься. Обращайте внимание на большие чанки - их быть не должно. Сам Nuxt.js в момент сборки приложения будет выдавать предупреждения, если размер одного чанка больше 250 килобайт.

Большой чанк может образоваться, если вы глобально в nuxt.config.js подключаете несколько больших плагинов.

Плагины: адекватность, подключение

Пример безответственного подключения плагина - использование moment.js глобально и подключение его целиком. Больше половины moment.js занимают файлы локализации. Не нужно их все подключать. Выберите 1 или 2 нужных - это существенно сократит размер приложения.

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

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

Также всегда стоит попробовать поискать альтернативные плагины. Вместо moment.js можно использовать такой же функциональный, но более компактный date-fns.

Компоненты

Большинство компонентов можно без проблем подключать асинхронно. Это позволит выделить компонент в отдельный чанк и загружать его только на нужных страницах. В последнем обновлении Google Page Speed в отчёте даже появился отдельный пункт, где указывается на процент неиспользуемого кода на конкретной странице. Например, вы загружаете 100 килобайт js кода, а на конкретной странице используете только 5 килобайт из него. Получается, что 95 килобайт загрузились впустую.

Вместо импорта и перечисления в компонентах используем такую конструкцию: components: { Breadcrumbs: () => import("~/components/Breadcrumbs") }.

Данные из бэкенда

Nuxt.js может использовать SSR (рендеринг на стороне сервера). Соответственно, все динамические данные, которые приходят с бэкенда, дополнительно приходят к клиенту в браузер в виде гидрации (hydration). В самом низу кода страницы вы увидите раздел "window.__NUXT", где будет перечислено всё, что пришло с бекэнда. Вы можете посмотреть пример этих данных прямо сейчас, нажав CTRL+U. Для сравнения, зайдите на сайт автопроизводителя УАЗ и посмотрите, какой может быть размер гидрации.

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

Естественно, нельзя забывать о базовых настройках веб-сервера, внутри которого у вас работает Nuxt.js приложение: кэширование, http2, сжатие данных gzip.

Автор: Александр Дергунов
Дата публикации:
Поделиться: