Code splitting

Code splitting — это техника оптимизации загрузки веб-приложений, позволяющая разбивать код на отдельные части (чанки), которые подгружаются по мере необходимости. В JavaScript это особенно актуально для крупных приложений на фреймворках вроде React, Vue или Angular, где основной бандл может достигать десятков мегабайт.

Основные принципы code splitting

  1. Динамический импорт В JavaScript динамический импорт реализуется с помощью функции import(). Она возвращает промис, который загружает модуль только при обращении к нему:

    import('./module.js')
  .then(module => {
    module.init();
  })
  .catch(err => console.error('Ошибка загрузки модуля', err));

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

  2. Разделение бандлов по маршрутам В SPA (Single Page Application) часто используется подход, при котором каждый маршрут загружает только необходимые компоненты:

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

    Такой метод уменьшает начальный размер бандла и ускоряет Time to Interactive.

  3. Разделение сторонних библиотек Webpack и другие сборщики позволяют выносить зависимости из node_modules в отдельные чанки:

    optimization: {
  splitChunks: {
    chunks: 'all',
  },
}

    Это полезно для кэширования: сторонние библиотеки обновляются реже, чем собственный код приложения.

Влияние на производительность

Lighthouse оценивает производительность веб-страниц по метрикам, связанным с загрузкой и рендерингом. Code splitting напрямую влияет на следующие показатели:

  • First Contentful Paint (FCP) – уменьшение размера начального бандла ускоряет отображение первого контента.
  • Largest Contentful Paint (LCP) – подгрузка больших модулей асинхронно снижает задержку рендеринга ключевых элементов.
  • Time to Interactive (TTI) – пользователи могут взаимодействовать со страницей быстрее, поскольку основной JS загружается меньшим объемом.

Lighthouse может выявлять большие бандлы и рекомендовать динамическую загрузку модулей для снижения времени загрузки.

Интеграция с Webpack и другими сборщиками

Webpack предоставляет мощные инструменты для code splitting:

  1. Entry Points Разделение бандлов через разные точки входа:

    entry: {
  main: './src/index.js',
  admin: './src/admin.js',
}

    Каждый entry формирует отдельный файл.

  2. Dynamic Imports Использование import() автоматически создаёт отдельный чанковый файл для каждого модуля.

  3. SplitChunksPlugin Позволяет автоматически создавать общие чанки для модулей, используемых в нескольких бандлах:

    splitChunks: {
  cacheGroups: {
    vendor: {
      test: /[\\/]node_modules[\\/]/,
      name: 'vendors',
      chunks: 'all',
    },
  },
}

Best Practices для code splitting

  • Минимизировать число чанков — слишком мелкие чанки увеличивают количество запросов, что может замедлить загрузку.
  • Выделять критический код — оставить в основном бандле только те модули, которые нужны для первого отображения страницы.
  • Асинхронная загрузка медиа и больших библиотек — подгружать тяжелые скрипты после первого рендера.
  • Кэширование — использовать имена файлов с хешами для корректного кэширования и обновления модулей.

Инструменты анализа

  • Webpack Bundle Analyzer — визуализирует размеры чанков и позволяет оптимизировать структуру бандла.
  • Lighthouse — определяет крупные скрипты, которые замедляют загрузку, и рекомендует динамическую загрузку.
  • Source Map Explorer — анализирует содержимое бандлов и помогает найти модули, которые можно вынести в отдельные чанки.

Пример комплексного подхода

// main.js
import('./core.js').then(core => core.init());
import('./analytics.js'); // асинхронная загрузка, не критично для FCP

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: { filename: '[name].[contenthash].js' },
  optimization: {
    splitChunks: { chunks: 'all' },
  },
};

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

Code splitting является ключевым инструментом для оптимизации крупных приложений и напрямую влияет на скорость загрузки, интерактивность и оценку производительности в Lighthouse.

Оглавление