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

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

Среди основных преимуществ любых фреймворков: скорость работы и возможность полного контроля над кодом. Тем не менее, можно умудриться подключить кучу плагинов ради решения одной простейшей задачи, которая требуется только на 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.

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

Простое Nuxt.js приложение

Оптимизация Nuxt.js приложения
2787 просмотров2787
Простое Nuxt.js приложение
Пользуемся преимуществами современных javascript фреймворков.
Сложность:
Что такое Nuxt.js?
49 просмотров49
Простое Nuxt.js приложение
Описание javascript фреймворка Nuxt.js.
Сложность:
Установка Nuxt.js и подготовка IDE
51 просмотров51
Простое Nuxt.js приложение
Устанавливаем нужное ПО и плагины, загружаем проект с Github.
Сложность:
Режимы работы Nuxt.js
54 просмотров54
Простое Nuxt.js приложение
Отдельный процесс и middleware для Express.js.
Сложность:
Структура Nuxt.js приложения
62 просмотров62
Простое Nuxt.js приложение
Типовые папки и файлы, разделение функциональности.
Сложность:
Структура Nuxt.js приложения - видео
Бэкенд Express + Mongoose
48 просмотров48
Простое Nuxt.js приложение
Реализация бэкенда для Nuxt приложения
Сложность:
Шаблоны и страницы
31 просмотров31
Простое Nuxt.js приложение
Для чего они нужны? Какие между ними отличия.
Сложность:
Vue компоненты
51 просмотров51
Простое Nuxt.js приложение
Примеры использования в Nuxt.js
Сложность:
Главная страница энциклопедии
metrika