Мы часто сталкиваемся с ситуацией: интернет-магазин на 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. Свяжитесь с нами, чтобы получить консультацию по вашему проекту. Ускорение загрузки сайта — это вклад в его успех, и мы поможем его достичь.