Производительность

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

• Медленный сервер запускается
• Медленная страница загрузки
• Медленные сборки

Просмотрите Настройку Браузера

Некоторые расширения браузера могут мешать запросам и замедлять время запуска и перезагрузки для больших приложений, особенно при использовании инструментов Dev Browser. Мы рекомендуем создать профиль только для DEV без расширений или переключаться в режим Incognito, используя при этом Dev Server Vite в этих случаях. Режим Incognito также должен быть быстрее, чем обычный профиль без расширений.

Сервер Vite Dev делает жесткое кэширование предварительно связанных зависимостей и реализует быстрые ответы 304 для исходного кода. Отключение кэша, в то время как инструменты Dev Browser открыты, может оказать большое влияние на время запуска и полностраничного перезагрузки. Пожалуйста, убедитесь, что «Отключить кэш» не включена, пока вы работаете с сервером Vite.

Аудит Настроенных Плагинов Vite

Внутренние и официальные плагины VITE оптимизированы, чтобы выполнить наименьшее количество работы, обеспечивая совместимость с более широкой экосистемой. Например, преобразования кода используют Regex в Dev, но выполните полный разбор в сборке, чтобы обеспечить правильность.

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

1. Большие зависимости, которые используются только в некоторых случаях, должны быть динамически импортированы, чтобы сократить время запуска Node.js. Пример рефакторов: Vite-Plugin-React#212 и Vite-Plugin-PWA#224 .

2. Крюки buildStart , config и configResolved не должны выполнять длинные и обширные операции. Эти крючки ожидаются во время запуска Dev Server, который задерживается, когда вы можете получить доступ к сайту в браузере.

3. Крюки resolveId , load и transform могут привести к тому, что некоторые файлы загружаются медленнее, чем другие. Хотя иногда и неизбежно, все еще стоит проверить возможные области для оптимизации. Например, проверяя, содержит ли code конкретное ключевое слово, или id соответствует конкретному расширению, прежде чем выполнять полное преобразование.

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

   Вы можете проверить продолжительность, необходимую для преобразования файла, используя vite --debug plugin-transform или Vite-Plugin-Inspect . Обратите внимание, что, поскольку асинхронные операции имеют тенденцию обеспечивать неточные времена, вы должны рассматривать цифры как приблизительную оценку, но это все равно должно выявить более дорогие операции.

Profiling

Вы можете запустить vite --profile , посетить сайт и нажать p + enter в своем терминале, чтобы записать .cpuprofile . Затем можно использовать инструмент, подобный SpeedScope для осмотра профиля и идентификации узких мест. Вы также можете поделиться профилями с командой Vite, чтобы помочь нам определить проблемы с производительностью.

Уменьшить Операции Разрешения

Разрешение путей импорта может быть дорогостоящей деятельностью при частоте его наихудшего случая. Например, VITE поддерживает «Угадание» путей импорта с опцией resolve.extensions , который по умолчанию по умолчанию ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json'] .

Когда вы попытаетесь импортировать ./Component.jsx с import './Component' , Vite выполнит эти шаги, чтобы разрешить его:

1. Проверьте, существует ли ./Component , нет.
2. Проверьте, существует ли ./Component.mjs , нет.
3. Проверьте, существует ли ./Component.js , нет.
4. Проверьте, существует ли ./Component.mts , нет.
5. Проверьте, существует ли ./Component.ts , нет.
6. Проверьте, существует ли ./Component.jsx , да!

Как показано, для разрешения пути импорта требуется в общей сложности 6 проверок файловой системы. Чем более неявный импорт у вас есть, тем больше времени он добавляет, чтобы разрешить пути.

Следовательно, обычно лучше быть явным с вашим импортным путями, например, import './Component.jsx' . Вы также можете сузить список для resolve.extensions , чтобы уменьшить проверки общей файловой системы, но вы должны убедиться, что он также работает для файлов в node_modules .

Если вы автор плагинов, обязательно вызовите this.resolve , только когда это необходимо, чтобы уменьшить количество чеков выше.

TypeScript

Если вы используете TypeScript, включите "moduleResolution": "bundler" и "allowImportingTsExtensions": true в tsconfig.json 'S compilerOptions для использования .ts и .tsx расширений непосредственно в вашем коде.

Избегайте Файлов Ствола

Файлы ствола-это файлы, которые реэкспортируют API других файлов в том же каталоге. Например:

src/utils/index.js

export * from './color.js'
export * from './dom.js'
export * from './slash.js'

Когда вы импортируете только отдельный API, import { slash } from './utils' , все файлы в этом файле ствола должны быть извлечены и преобразованы, поскольку они могут содержать slash API, а также могут содержать побочные эффекты, которые работают при инициализации. Это означает, что вы загружаете больше файлов, чем требуется на начальной загрузке страницы, что приводит к более медленной загрузке страницы.

Если возможно, вам следует избегать файлов ствола и импортировать отдельные API напрямую, например, import { slash } from './utils/slash.js' . Вы можете прочитать проблему № 8237 для получения дополнительной информации.

Размирать Часто Используемые Файлы

Сервер Vite Dev преобразует только файлы, запрашиваемые браузером, который позволяет ему быстро запускаться и применять только преобразования для используемых файлов. Он также может предварительно трансформировать файлы, если в ближайшее время будут запрошены определенные файлы. Тем не менее, запросить водопады все еще может произойти, если некоторые файлы потребуются больше времени, чем другие. Например:

Учитывая график импорта, где левый файл импортирует правый файл:

main.js -> BigComponent.vue -> big-utils.js -> large-data.json

Отношения импорта могут быть известны только после того, как файл преобразован. Если BigComponent.vue требуется некоторое время, чтобы преобразовать, big-utils.js должен ждать своей очереди и так далее. Это вызывает внутренний водопад даже со встроенной до трансформации.

VITE позволяет вам использовать файлы, которые, как вы знаете, часто используются, big-utils.js , с помощью server.warmup опции. Таким образом big-utils.js будет готова и кэшируется немедленно, когда его запрошен.

Вы можете найти файлы, которые часто используются путем запуска vite --debug transform , и осмотреть журналы:

vite:transform 28.72ms /@vite/client +1ms
vite:transform 62.95ms /src/components/BigComponent.vue +1ms
vite:transform 102.54ms /src/utils/big-utils.js +1ms

vite.config.js

export default defineConfig({
  server: {
    warmup: {
      clientFiles: [
        './src/components/BigComponent.vue',
        './src/utils/big-utils.js',
      ],
    },
  },
})

Обратите внимание, что вы должны разогревать файлы, которые часто используются, чтобы не перегружать сервер Vite Dev при запуске. Проверьте вариант server.warmup для получения дополнительной информации.

Использование --open или server.open также обеспечивает повышение производительности, так как Vite автоматически прогревает точку входа вашего приложения или предоставленный URL -адрес для открытия.

Используйте Меньший Или Собственный Инструмент

Сохранение быстрого вита с растущей кодовой базой - это сокращение объема работы для исходных файлов (JS/TS/CSS).

Примеры выполнения меньше работы:

• Используйте CSS вместо SASS/MENS/Stylus, когда это возможно (гнездование может быть обработано PostCS)
• Не превращайте SVG в компоненты Framework UI (React, Vue и т. Д.). Импортируйте их как строки или URL -адреса.
• При использовании @vitejs/plugin-react избегайте настройки опций Babel, поэтому он пропускает преобразование во время сборки (будет использоваться только ESBuild).

Примеры использования нативного инструмента:

Использование нативного инструмента часто приносит больший размер установки, и так же не является по умолчанию при запуске нового проекта Vite. Но это может стоить затрат на более крупные приложения.

• Попробуйте экспериментальную поддержку Lightningcss
• Используйте @vitejs/plugin-react-swc вместо @vitejs/plugin-react .