Оптимизация размера бандла

TanStack Router — современная маршрутизирующая библиотека для React и других фронтенд-фреймворков, ориентированная на высокую производительность и гибкость в управлении состоянием маршрутов. Одним из ключевых аспектов при работе с приложениями на TanStack Router является контроль размера итогового бандла, что напрямую влияет на скорость загрузки и отзывчивость интерфейса.

Разделение кода (Code Splitting)

Одним из основных инструментов оптимизации является разделение кода по маршрутам. TanStack Router предоставляет возможность ленивой загрузки компонентов с помощью динамического импорта.

Пример:

import { createRouter, RouterProvider } from '@tanstack/router';
import { lazy } from 'react';

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

const router = createRouter({
  routes: [
    {
      path: '/',
      component: Home,
    },
    {
      path: '/about',
      component: About,
    },
  ],
});

function App() {
  return <RouterProvider router={router} />;
}

В данном примере компоненты Home и About загружаются только при переходе на соответствующие маршруты. Это позволяет существенно сократить первоначальный размер бандла.

Использование загрузчиков данных с ленивой загрузкой

TanStack Router поддерживает загрузку данных на уровне маршрутов через loader функции. В сочетании с ленивой загрузкой компонентов можно добиться того, что весь код и данные для конкретного маршрута загружаются только при необходимости.

const About = lazy(() => import('./pages/About'));

const router = createRouter({
  routes: [
    {
      path: '/about',
      component: About,
      loader: async () => {
        const response = await fetch('/api/about-data');
        return response.json();
      },
    },
  ],
});

Это предотвращает загрузку лишних данных и кода для маршрутов, которые пользователь может никогда не посетить.

Оптимизация через мемоизацию компонентов маршрутов

При большом количестве вложенных маршрутов можно использовать React.memo и другие техники мемоизации для компонентов, рендер которых не изменяется при навигации между маршрутами. Это снижает нагрузку на главный бандл и уменьшает количество повторных вычислений.

import { memo } from 'react';

const About = memo(lazy(() => import('./pages/About')));

Минимизация зависимостей маршрутизатора

TanStack Router построен с модульной архитектурой. Для уменьшения бандла важно импортировать только необходимые функции, избегая глобального импорта всей библиотеки.

Правильный импорт:

import { createRouter, RouterProvider } from '@tanstack/router';

Неправильный, увеличивающий размер бандла:

import * as TanStackRouter from '@tanstack/router';

Tree Shaking и оптимизация сборки

Для эффективного уменьшения бандла важно убедиться, что сборщик (Webpack, Vite, Rollup) поддерживает tree shaking. TanStack Router написан с учётом ES-модулей, что позволяет сборщику удалять неиспользуемый код автоматически.

Советы по конфигурации:

  • Использовать mode: 'production' для Webpack или соответствующие флаги для Vite/Rollup.
  • Настроить sideEffects: false в package.json, если проект не использует побочные эффекты.
  • Разделять большие маршруты на отдельные чанки через динамический импорт.

Оптимизация вложенных маршрутов

Для сложных приложений с множеством вложенных маршрутов важно не загружать все подмаршруты сразу. TanStack Router позволяет настраивать ленивую загрузку дочерних маршрутов через lazy в конфигурации маршрутов:

const router = createRouter({
  routes: [
    {
      path: '/',
      component: lazy(() => import('./pages/Home')),
      children: [
        {
          path: 'profile',
          component: lazy(() => import('./pages/Profile')),
        },
        {
          path: 'settings',
          component: lazy(() => import('./pages/Settings')),
        },
      ],
    },
  ],
});

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

Оптимизация ресурсов статических ассетов

Помимо кода, TanStack Router позволяет интегрироваться с системами ленивой загрузки изображений, стилей и других ресурсов, чтобы уменьшить первоначальный payload. Использование динамических импортов и React.Suspense позволяет комбинировать загрузку компонентов и ресурсов в одном асинхронном блоке.

const About = lazy(() =>
  import('./pages/About').then(module => {
    import('./pages/About.css');
    return module;
  })
);

Итоговые практики

  • Разделять код на отдельные чанки по маршрутам.
  • Использовать динамические импорты для компонентов и стилей.
  • Загружать данные на уровне маршрута через loader.
  • Избегать глобального импорта всей библиотеки.
  • Применять мемоизацию компонентов и tree shaking сборщика.
  • Ленивая загрузка дочерних маршрутов и ресурсов.

Эти техники совместно позволяют существенно уменьшить размер бандла, ускорить загрузку приложения и обеспечить высокую отзывчивость интерфейса при использовании TanStack Router.

Оглавление