Мы часто сталкиваемся с ситуацией: интернет-магазин на React загружается 8 секунд на мобильных. Причина — монолитный JS-бандл весом 2 МБ. Браузер вынужден загрузить, распарсить и выполнить весь код до показа первого контента. Это ухудшает INP и FCP, снижает конверсию на 30%. Наша команда предлагает системную оптимизацию бандла: code splitting по маршрутам, tree shaking, lazy imports и замену тяжёлых библиотек. Под ключ — анализ, доработка, мониторинг в CI. Гарантируем снижение начального JS до 50 кБ. Оценим ваш проект за 2 дня.
Анализ бандла и поиск проблем
# Vite — визуализация через rollup-plugin-visualizer npm install -D rollup-plugin-visualizer // vite.config.ts import { visualizer } from 'rollup-plugin-visualizer'; import { defineConfig } from 'vite'; export default defineConfig({ plugins: [ visualizer({ filename: 'dist/stats.html', open: true, gzipSize: true, }) ], build: { rollupOptions: { output: { manualChunks: { 'vendor-react': ['react', 'react-dom', 'react-router-dom'], 'vendor-ui': ['@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu'], 'vendor-query': ['@tanstack/react-query'], }, } }, chunkSizeWarningLimit: 500, } }); После сборки открывается интерактивная карта бандла. Ищем крупные библиотеки (moment.js, lodash), дублирование зависимостей и импорты целиком вместо нужной функции. В среднем такой аудит занимает 1–2 часа и выявляет основные «жирные» места.
Code splitting по маршрутам
Code splitting делит бандл на части по маршрутам. Пользователь скачивает только код текущей страницы. Это уменьшает объём начальной загрузки и ускоряет INP. Для React используем React.lazy и Suspense:
// React Router v6 — lazy loading страниц import { lazy, Suspense } from 'react'; import { createBrowserRouter, RouterProvider } from 'react-router-dom'; const ProductCatalog = lazy(() => import('./pages/ProductCatalog')); const ProductDetail = lazy(() => import('./pages/ProductDetail')); const Cart = lazy(() => import('./pages/Cart')); const Checkout = lazy(() => import('./pages/Checkout')); const router = createBrowserRouter([ { path: '/catalog', element: <Suspense fallback={<PageSkeleton />}><ProductCatalog /></Suspense> }, { path: '/products/:slug', element: <Suspense fallback={<PageSkeleton />}><ProductDetail /></Suspense> }, { path: '/cart', element: <Suspense fallback={<PageSkeleton />}><Cart /></Suspense> }, { path: '/checkout', element: <Suspense fallback={<PageSkeleton />}><Checkout /></Suspense> }, ]); // Динамический импорт тяжёлых компонентов (редактор, графики, карты) const RichTextEditor = lazy(() => import('./components/RichTextEditor')); const Chart = lazy(() => import('./components/Chart')); function ProductForm() { const [showEditor, setShowEditor] = useState(false); return ( <> <button onClick={() => setShowEditor(true)}>Добавить описание</button> {showEditor && ( <Suspense fallback={<div>Загрузка редактора...</div>}> <RichTextEditor /> </Suspense> )} </> ); } Tree shaking и замена библиотек
Tree shaking удаляет неиспользуемый код, уменьшая объём JS. Это снижает время парсинга и выполнения, улучшая FCP и INP. Vite и Webpack автоматически исключают dead code при правильной организации импортов.
// Плохо: импорт всего lodash (~70кБ gzip) import _ from 'lodash'; const sorted = _.sortBy(products, 'price'); // Хорошо: импорт только нужной функции import sortBy from 'lodash/sortBy'; const sorted = sortBy(products, 'price'); // Ещё лучше: нативный JS const sorted = [...products].sort((a, b) => a.price - b.price); // date-fns вместо moment.js import { format, addDays } from 'date-fns'; // tree-shakeable import { ru } from 'date-fns/locale'; Таблица замены библиотек
| Библиотека | Замена | Экономия |
|---|---|---|
| moment.js (72кБ) | date-fns (только нужные функции) | ~60кБ (в 3.6 раза меньше) |
| lodash (70кБ) | lodash-es + tree-shaking | ~50кБ |
| axios (13кБ) | native fetch | 13кБ |
| jquery (87кБ) | Нативный JS | 87кБ |
| react-icons (все) | Только нужные из @heroicons | 100–500кБ |
Почему tree shaking не всегда работает?
Tree shaking эффективен только для ES-модулей. Если библиотека экспортирует CommonJS (require), dead code не удалится. Проверьте, поддерживает ли пакет "type": "module" или используйте lodash-es вместо lodash. Также убедитесь, что в вашем проекте не включён плагин @rollup/plugin-commonjs без опции transformMixedEsModules. В SPA эта проблема встречается часто, особенно при использовании старых пакетов. Мы помогаем мигрировать на современные альтернативы, что улучшает Core Web Vitals.
Что входит в работу
- Анализ текущей сборки и отчёт с рекомендациями.
- Реализация code splitting и lazy loading.
- Замена тяжёлых библиотек с сохранением функциональности.
- Настройка tree shaking и оптимизация чанков.
- Интеграция мониторинга размера бандла в CI/CD.
- Документация и инструкция по дальнейшей оптимизации.
- Поддержка инженеров в течение 2 недель после внедрения.
Процесс оптимизации
- Аудит текущего бандла с помощью Vite visualizer или Webpack Bundle Analyzer.
- Выявление крупных библиотек и дубликатов.
- Разработка стратегии code splitting по маршрутам и компонентам.
- Замена тяжёлых библиотек на лёгкие аналоги.
- Настройка tree shaking и manual chunks в Vite/Rollup.
- Внедрение предзагрузки критичных чанков (prefetch при hover).
- Интеграция проверки размера бандла в CI.
- Документирование результатов и обучение команды.
Сроки и результаты
От 2 до 5 дней в зависимости от сложности проекта. Включает аудит, code splitting, замену библиотек и настройку CI. Гарантируем снижение начального JavaScript до 50 кБ. Такая оптимизация позволяет сэкономить на трафике и улучшить пользовательский опыт, что прямо влияет на конверсию и доход. Закажите аудит, чтобы получить конкретные цифры для вашего проекта.
Кейс из практики
Для одного интернет-магазина (React, Next.js) исходный бандл весил 1.5 МБ. После code splitting по страницам и замены moment.js на date-fns начальный JS сократился до 180 кБ. LCP улучшился с 4.2 до 1.1 секунды, а INP — с 450 до 120 мс. Конверсия выросла на 12%. Весь проект занял 4 дня. Экономия на CDN-трафике составила примерно 30% в месяц.
Мониторинг в CI и метрики
Целевые значения для интернет-магазина (gzip):
| Чанк | Цель |
|---|---|
| Первоначальный JS (critical path) | < 50 кБ |
| React + React DOM | ~42 кБ |
| Страница каталога | < 30 кБ |
| Карточка товара | < 20 кБ |
| Корзина/Оформление | < 40 кБ |
# .github/workflows/bundle-size.yml - name: Check bundle size run: | npm run build MAIN_JS=$(ls dist/assets/index-*.js | xargs stat -c%s | head -1) if [ "$MAIN_JS" -gt 200000 ]; then echo "Bundle too large: ${MAIN_JS} bytes" exit 1 fi Подробнее о JavaScript-модулях в документации MDN. Мы гарантируем улучшение метрик Core Web Vitals. Свяжитесь с нами, чтобы получить консультацию по вашему проекту. Ускорение загрузки сайта — это вклад в его успех, и мы поможем его достичь.