1754
Среди основных преимуществ 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.
