Как вынести React на CDN при сборке Vite+React
При стандартной сборке проекта на Vite и React все зависимости, включая сам React, упаковываются в один бандл index-[hash].js. Это увеличивает размер файла и время загрузки. Многие разработчики хотят вынести React на CDN, чтобы уменьшить объём бандла и использовать кэширование библиотек браузером. Рассмотрим, как это сделать.
Почему стоит выносить React на внешний CDN?
Использование CDN для React и ReactDOM даёт несколько преимуществ:
- Снижение размера бандла - библиотеки не попадают в итоговый JS-файл, что уменьшает его объём на 100-150 КБ (в сжатом виде).
- Ускорение загрузки - CDN-сервера быстрее доставляют файлы, а браузер может закэшировать популярные версии библиотек, если они используются на других сайтах.
- Гибкость обновления - можно менять версию React через CDN-ссылку, не пересобирая весь проект.
Настройка Vite для внешней зависимости React
Для этого нужно изменить конфигурацию vite.config.js. Используется опция rollupOptions.external, чтобы исключить React из сборки, и globals - чтобы указать глобальные переменные, которые будут доступны из CDN.
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
build: {
rollupOptions: {
external: ['react', 'react-dom'],
output: {
globals: {
react: 'React',
'react-dom': 'ReactDOM',
},
},
},
},
});Добавление CDN-ссылок в HTML
После исключения React из бандла нужно вручную подключить библиотеки через теги <script> в файле index.html. Пример для React 18:
<!DOCTYPE html>
<html lang="ru">
<head>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>Важно: скрипты CDN должны загружаться до вашего модуля main.jsx, чтобы React и ReactDOM были доступны глобально.
Автоматизация через плагин vite-plugin-cdn-import
Чтобы не прописывать CDN-ссылки вручную, можно использовать плагин vite-plugin-cdn-import. Он сам подставляет теги и настраивает external.
// Установка
npm install vite-plugin-cdn-import --save-dev
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { cdn } from 'vite-plugin-cdn-import';
export default defineConfig({
plugins: [
react(),
cdn({
modules: [
'react',
'react-dom',
],
}),
],
});Плагин автоматически загрузит CDN-скрипты в index.html и исключит библиотеки из сборки. Это самый удобный способ.
Проверка результата
После сборки (npm run build) проверьте файл dist/index.html - там должны быть теги с CDN. Сам бандл index-[hash].js будет содержать только ваш код, без React. Размер файла уменьшится, а при загрузке страницы React подтянется с CDN.
Возможные проблемы и их решение
- React не определён - убедитесь, что CDN-скрипты загружаются до вашего скрипта. Проверьте порядок в
index.html. - Конфликт версий - используйте одинаковые версии React и ReactDOM (например, обе 18.2.0).
- Не работают хуки - при использовании CDN убедитесь, что атрибут
crossoriginприсутствует, чтобы избежать ошибок CORS.
Вынос React на CDN - это эффективный способ оптимизировать сборку Vite-проекта. Следуя инструкции, вы уменьшите время загрузки страницы для пользователей.