Знаете ли вы, что Next.js предоставляет нам возможность анализировать размер выходного пакета?
При создании приложения трудно определить, что будет включено в конечный результат сборки.
Но не беспокойтесь, в этой статье я покажу вам, как можно добавить анализатор пакетов для анализа выходных данных сборки.
Установка анализатора пакетов Next.js
Для начала давайте возьмем существующий проект Next.js для работы.
Я буду использовать для этого свой блог Next markdown.
Первое, что мы хотим сделать, это установить анализатор с помощью следующей команды.
npm install @next/bundle-analyzer
Следующая часть — это создание/изменение нашего файла next.config.js.
Первый элемент, который нам нужен, — это определение анализатора, которое мы можем импортировать следующим образом.
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
Следующий шаг может зависеть от того, есть ли у вас уже какая-то конфигурация.
Если нет, вы можете выполнить следующий экспорт.
module.exports = withBundleAnalyzer({});
В противном случае вам придется обернуть существующий экспорт с помощью анализатора связок.
module.exports = withBundleAnalyzer({
reactStrictMode: true,
});
Запуск анализатора
Чтобы запустить анализатор, нужно использовать переменную окружения, определенную выше.
Команда будет выглядеть следующим образом:
ANALYZE=true npm run build
Когда вы запустите эту команду, она автоматически откроет две страницы в вашем браузере.
- Код на стороне клиента
- Код на стороне сервера
Вы можете быстро проверить, что занимает больше всего места, или, при использовании Monorepos, какие пакеты могли быть непреднамеренно включены дважды.
Быстрая команда
Мы также можем создать быструю команду, чтобы не беспокоиться об установке этой переменной окружения при каждом вызове.
Перейдите в файл package.json и добавьте новый скрипт следующего содержания.
"scripts": {
...
"analyze": "ANALYZE=true next build"
},
Теперь вы можете быстро запустить анализатор с помощью следующей команды.
npm run analyze
Я также загрузил изменения в проект, чтобы вы могли просмотреть их на GitHub.
Спасибо, что прочитали, и давайте подключаться!
Спасибо, что читаете мой блог. Не стесняйтесь подписаться на мою рассылку по электронной почте и подключайтесь к Facebook или Twitter.