Оптимизация локальной среды разработки

Next.js разработан для обеспечения отличного опыта разработчика. По мере роста вашего приложения вы можете заметить замедление времени компиляции во время локальной разработки. Это руководство поможет вам выявить и устранить распространённые проблемы с производительностью при компиляции.

Локальная разработка vs. продакшен

Процесс разработки с next dev отличается от next build и next start.

next dev компилирует маршруты вашего приложения по мере их открытия или перехода. Это позволяет запустить сервер разработки без ожидания компиляции всех маршрутов приложения, что работает быстрее и использует меньше памяти. Продакшен-сборка применяет другие оптимизации, такие как минификация файлов и создание хэшей контента, которые не нужны для локальной разработки.

Улучшение производительности локальной разработки

1. Проверьте антивирус на вашем компьютере

Антивирусное ПО может замедлять доступ к файлам.

Попробуйте добавить папку вашего проекта в список исключений антивируса. Хотя это более распространено на Windows, мы рекомендуем сделать это для любой системы с установленным антивирусом.

2. Обновите Next.js и включите Turbopack

Убедитесь, что вы используете последнюю версию Next.js. Каждая новая версия часто включает улучшения производительности.

Turbopack — это новый бандлер, интегрированный в Next.js, который может улучшить локальную производительность.

npm install next@latest
npm run dev --turbopack

Узнайте больше о Turbopack. Смотрите наши руководства по обновлению и codemods для дополнительной информации.

3. Проверьте ваши импорты

Способ импорта кода может значительно влиять на время компиляции и бандлинга. Узнайте больше об оптимизации бандлинга пакетов и изучите инструменты вроде Dependency Cruiser или Madge.

Библиотеки иконок

Библиотеки вроде @material-ui/icons или react-icons могут импортировать тысячи иконок, даже если вы используете лишь несколько. Старайтесь импортировать только нужные иконки:

// Вместо этого:
import { Icon1, Icon2 } from 'react-icons/md'

// Делайте так:
import Icon1 from 'react-icons/md/Icon1'
import Icon2 from 'react-icons/md/Icon2'

Библиотеки вроде react-icons включают множество наборов иконок. Выберите один набор и придерживайтесь его.

Например, если ваше приложение использует react-icons и импортирует все эти наборы:

pi (Phosphor Icons)
md (Material Design Icons)
tb (tabler-icons)
cg (cssgg)

Вместе они составят десятки тысяч модулей, которые компилятор должен обработать, даже если вы используете только один импорт из каждого.

Бочкообразные файлы (barrel files)

"Бочкообразные файлы" — это файлы, которые реэкспортируют множество элементов из других файлов. Они могут замедлять сборку, так как компилятор должен их анализировать, чтобы найти побочные эффекты в области модуля при использовании импорта.

По возможности старайтесь импортировать напрямую из конкретных файлов. Узнайте больше о бочкообразных файлах и встроенных оптимизациях в Next.js.

Оптимизация импортов пакетов

Next.js может автоматически оптимизировать импорты для определённых пакетов. Если вы используете пакеты с бочкообразными файлами, добавьте их в next.config.js:

module.exports = {
  experimental: {
    optimizePackageImports: ['package-name'],
  },
}

Turbopack автоматически анализирует импорты и оптимизирует их. Для него эта конфигурация не требуется.

4. Проверьте настройку Tailwind CSS

Если вы используете Tailwind CSS, убедитесь, что он настроен правильно.

Распространённая ошибка — настройка массива content таким образом, что он включает node_modules или другие большие директории с файлами, которые не должны сканироваться.

Tailwind CSS версии 3.4.8 и новее будет предупреждать о настройках, которые могут замедлить сборку.

В tailwind.config.js укажите конкретные файлы для сканирования:

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}', // Хорошо
    // Это может быть слишком широко
    // Будет включать `packages/**/node_modules`
    // '../../packages/**/*.{js,ts,jsx,tsx}',
  ],
}

Избегайте сканирования ненужных файлов:

module.exports = {
  content: [
    // Лучше — сканирует только папку 'src'
    '../../packages/ui/src/**/*.{js,ts,jsx,tsx}',
  ],
}

5. Проверьте пользовательские настройки webpack

Если вы добавили пользовательские настройки webpack, они могут замедлять компиляцию.

Подумайте, действительно ли они нужны для локальной разработки. Вы можете включать определённые инструменты только для продакшен-сборок или перейти на Turbopack, используя лоадеры.

6. Оптимизация использования памяти

Если ваше приложение очень большое, ему может потребоваться больше памяти.

Узнайте больше об оптимизации использования памяти.

7. Серверные компоненты и получение данных

Изменения в серверных компонентах вызывают полный ререндеринг страницы локально, чтобы показать новые изменения, включая получение новых данных для компонента.

Экспериментальная опция serverComponentsHmrCache позволяет кэшировать ответы fetch в серверных компонентах между обновлениями Hot Module Replacement (HMR) в локальной разработке. Это приводит к более быстрым ответам и снижению затрат на платные API-вызовы.

Узнайте больше об экспериментальной опции.

8. Рассмотрите локальную разработку вместо Docker

Если вы используете Docker для разработки на Mac или Windows, вы можете столкнуться с заметно более низкой производительностью по сравнению с локальным запуском Next.js.

Доступ Docker к файловой системе на Mac и Windows может привести к тому, что Hot Module Replacement (HMR) будет занимать секунды или даже минуты, тогда как то же приложение работает с быстрым HMR при локальной разработке.

Эта разница в производительности связана с тем, как Docker обрабатывает операции с файловой системой вне Linux-окружений. Для лучшего опыта разработки:

Используйте локальную разработку (npm run dev или pnpm dev) вместо Docker во время разработки
Оставьте Docker для продакшен-развёртываний и тестирования продакшен-сборок
Если вам необходимо использовать Docker для разработки, рассмотрите Docker на Linux-машине или VM

Узнайте больше о развёртывании с Docker для продакшен-использования.

Инструменты для поиска проблем

Подробное логирование запросов fetch

Используйте опцию logging.fetches в файле next.config.js, чтобы видеть более подробную информацию о происходящем во время разработки:

module.exports = {
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
}

Узнайте больше о логировании запросов fetch.

Трассировка Turbopack

Трассировка Turbopack — это инструмент, который помогает понять производительность вашего приложения во время локальной разработки. Он предоставляет подробную информацию о времени, затраченном на компиляцию каждого модуля, и их взаимосвязях.

Убедитесь, что у вас установлена последняя версия Next.js.
Сгенерируйте файл трассировки Turbopack:
```
NEXT_TURBOPACK_TRACING=1 npm run dev
```
Перемещайтесь по приложению или редактируйте файлы, чтобы воспроизвести проблему.
Остановите сервер разработки Next.js.
В папке .next будет доступен файл trace-turbopack.
Вы можете интерпретировать файл с помощью next internal trace [путь-к-файлу]:
```
next internal trace .next/trace-turbopack
```
В версиях, где trace недоступен, команда называлась turbo-trace-server:
```
next internal turbo-trace-server .next/trace-turbopack
```
После запуска сервера трассировки вы можете просмотреть её на https://trace.nextjs.org/.
По умолчанию просмотрщик трассировки агрегирует временные показатели. Чтобы увидеть каждое отдельное время, вы можете переключиться с "Aggregated in order" на "Spans in order" в правом верхнем углу просмотрщика.

Всё ещё есть проблемы?

Поделитесь файлом трассировки, сгенерированным в разделе Трассировка Turbopack, на GitHub Discussions или Discord.

Оптимизация локальной среды разработки

On this page