Анализ сборки и стратегия разделения кода
Анализируйте размер сборки с помощью rollup-plugin-visualizer и определяйте стратегию разделения кода по маршрутам.
«Анализ сборки и стратегия разделения кода» — бесплатный урок React Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.
Почему размер сборки имеет значение
Большие сборки JavaScript увеличивают время до интерактивности. Каждый KB JS необходимо загрузить, разобрать и выполнить, прежде чем страница станет интерактивной, особенно в медленных мобильных сетях.
Анализ с помощью rollup-plugin-visualizer
В проектах Vite используйте плагин визуализации, чтобы создать древовидную карту сборки и увидеть, какие модули занимают больше всего места.
// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';
export default defineConfig({
plugins: [
visualizer({ open: true, gzipSize: true, brotliSize: true })
],
});
// After build, open the generated HTML file to explore the treemapАнализатор сборки Next.js
Используйте @next/bundle-analyzer, чтобы анализировать серверные и клиентские сборки в Next.js.
npm install @next/bundle-analyzer
// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
module.exports = withBundleAnalyzer({});
// Run:
// ANALYZE=true npm run buildРазделение кода по маршрутам
Наиболее эффективный способ разделения: загружать код каждого маршрута только при переходе пользователя на него. React Router с lazy() и маршрутизатор приложения Next.js делают это автоматически.
// React Router v6 with lazy loading
import { lazy, Suspense } from 'react';
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));
<Routes>
<Route path="/dashboard" element={<Suspense fallback={<Loading />}><Dashboard /></Suspense>} />
<Route path="/settings" element={<Suspense fallback={<Loading />}><Settings /></Suspense>} />
</Routes>Разделение кода на уровне компонентов
Откладывайте загрузку тяжёлых компонентов (карт, графиков, редакторов) до момента, когда они понадобятся, используя lazy().
const MonacoEditor = lazy(() => import('@monaco-editor/react'));
const MapView = lazy(() => import('./MapView'));
function ProductEditor({ showMap }) {
return (
<>
<Suspense fallback={<EditorSkeleton />}><MonacoEditor /></Suspense>
{showMap && <Suspense fallback={<MapSkeleton />}><MapView /></Suspense>}
</>
);
}Динамический импорт для условных функций
Импортируйте большие библиотеки только при активации соответствующей функции, чтобы не загружать их для всех пользователей.
async function exportToPDF() {
const { default: jsPDF } = await import('jspdf'); // ~300KB — loaded on demand
const doc = new jsPDF();
doc.text('Hello', 10, 10);
doc.save('export.pdf');
}Удаление неиспользуемого кода
Современные сборщики удаляют неиспользуемые экспорты («мёртвый код»). Убедитесь, что зависимости поддерживают ESM, а не CJS, чтобы это работало, и не импортируйте библиотеки целиком, если используете только одну функцию.
// Bad — imports entire lodash (~70KB):
import _ from 'lodash';
const result = _.debounce(fn, 300);
// Good — imports only debounce (<2KB):
import debounce from 'lodash/debounce';
// or with tree-shaking-friendly lodash-es:
import { debounce } from 'lodash-es';Предварительная загрузка важных фрагментов
Используйте <link rel='modulepreload'> или специальные комментарии Webpack, чтобы предварительно загрузить фрагмент следующей страницы, пока пользователь находится на текущей.
// Webpack magic comment — preload on hover:
const Dashboard = lazy(() => import(/* webpackPrefetch: true */ './Dashboard'));
// or preload (higher priority):
const Dashboard = lazy(() => import(/* webpackPreload: true */ './Dashboard'));Анализ влияния сторонних пакетов
Используйте bundlephobia.com или расширение Import Cost для VS Code, чтобы узнать размер любого пакета npm после сжатия gzip до его установки.
Установка ограничения размера сборки
Задайте ограничение размера для каждого маршрута в конфигурации Webpack или Vite. Сборка завершится с ошибкой, если фрагмент превысит установленный предел, что позволяет обнаруживать непреднамеренное увеличение размера в системе непрерывной интеграции.
// vite.config.ts
build: {
rollupOptions: {
output: {
manualChunks: {
'vendor-react': ['react', 'react-dom'],
'vendor-router': ['react-router-dom'],
},
},
},
chunkSizeWarningLimit: 200, // warn at 200KB
},Быстрая проверка
Какая стратегия разделения кода наиболее эффективна для React SPA с большим количеством страниц?
Итоги
Анализируйте сборки с помощью rollup-plugin-visualizer или @next/bundle-analyzer. Используйте разделение по маршрутам и компонентам с помощью lazy(). Применяйте удаление неиспользуемого кода, импортируя только нужные элементы. Задавайте ограничения размера в системе непрерывной интеграции и используйте подсказки предварительной выборки или загрузки для следующего вероятного маршрута.
Часто задаваемые вопросы
Урок «Анализ сборки и стратегия разделения кода» бесплатный?
Да — полный текст урока «Анализ сборки и стратегия разделения кода» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.
Чему я научусь в уроке «Анализ сборки и стратегия разделения кода»?
Анализируйте размер сборки с помощью rollup-plugin-visualizer и определяйте стратегию разделения кода по маршрутам. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать React Academy?
Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Анализ сборки и стратегия разделения кода»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке React Academy?
Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Измерение основных веб-показателей в приложениях React
- Анализ сборки и стратегия разделения кода
- Оптимизация изображений и шрифтов в React
- Снижение INP: оптимизация обработчиков событий