4662
Среди основных преимуществ любых фреймворков: скорость работы и возможность полного контроля над кодом. Тем не менее, можно умудриться подключить кучу плагинов ради решения одной простейшей задачи, которая требуется только на 1 странице. Всё это приведет к долгой загрузке страниц, медленной работе приложения. Что нужно сделать, чтобы такого не случилось?
Чем проверять
В Nuxt.js встроен webpack, а с ним и анализатор сборки приложения, который можно запустить командой в консоли:
npx nuxt build -a
Можно наглядно посмотреть, из каких конкретно файлов состоит ваше приложение. Если parsed размер приложения больше 1 мегабайта, то это повод задуматься. Обращайте внимание на большие чанки - их быть не должно. Сам Nuxt.js в момент сборки приложения будет выдавать предупреждения, если размер одного чанка больше 250 килобайт.
Большой чанк может образоваться, если вы глобально в nuxt.config.js подключаете несколько больших плагинов. Сам Nuxt.js делит приложение на чанки, исходя из шаблонов, страниц и компонентов.
Плагины: адекватность, подключение
Пример безответственного подключения плагина - использование moment.js глобально и подключение его целиком. Больше половины moment.js занимают файлы локализации. Не нужно их все подключать. Выберите 1 или 2 нужных - это существенно сократит размер бандла.
Если вы используете moment.js только в одном месте приложения, то гораздо лучше будет подключить плагин локально.
Нужен ли вам плагин в принципе? Например, вы преобразовываете дату из одного конкретного формата в другой, то проще самостоятельно написать скрипт, который будет решать эту задачу.
Также всегда стоит попробовать поискать альтернативные плагины. Вместо moment.js можно использовать такой же функциональный, но более компактный date-fns.
Компоненты
Большинство компонентов можно без проблем подключать асинхронно. Это позволит выделить компонент в отдельный чанк и загружать его только на нужных страницах. В Google LightHouse есть отдельный пункт, где указывается процент неиспользуемого кода на конкретной странице. Например, вы загружаете 100 килобайт js кода, а на конкретной странице используете только 5 килобайт из него. Получается, что 95 килобайт загрузились впустую.
Вместо импорта и перечисления в компонентах используем такую конструкцию:
components: { Breadcrumbs: () => import("~/components/Breadcrumbs") }
Данные из бэкенда
Nuxt.js может использовать SSR (рендеринг на стороне сервера). Соответственно, все динамические данные, которые приходят с бэкенда, дополнительно приходят к клиенту в браузер в виде гидратации (hydration). В самом низу кода страницы вы увидите раздел "window.__NUXT", где будет перечислено всё, что пришло с бекэнда. Вы можете посмотреть пример этих данных прямо сейчас, нажав CTRL+U. Для сравнения, зайдите на сайт автопроизводителя УАЗ и посмотрите, какой огромной может быть эта секция.
Если можно сократить передаваемые данные, то это необходимо делать: использовать пагинацию, убирать лишние данные, которые не отображаются на странице.
Естественно, нельзя забывать о базовых настройках веб-сервера, внутри которого у вас работает Nuxt.js приложение: кэширование, http2, сжатие данных gzip.
