Если вы когда-нибудь проводили день, отлаживая загадочную ошибку сборки, только чтобы обнаружить, что это была опечатка в конфигурации webpack, то вы знаете, что выбор правильного JavaScript-бандлера — это реальная проблема. Ландшафт бандлеров сильно изменился, и то, что было передовым пять лет назад, сегодня может доставлять вам ненужные проблемы.

Позвольте мне быть откровенным: не существует универсального ответа на вопрос «какой бандлер мне использовать?». Но для вашего проекта определённо есть правильный ответ, и мы здесь, чтобы вместе его найти. Думайте об этом как о руководстве по подбору пар для разработчиков — у каждого бандлера есть свой характер, особенности и идеальный партнёр (это вы или ваш проект).

Общая картина: какую проблему мы на самом деле решаем?

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

graph LR A["Исходный код
JavaScript, CSS, Активы"] --> B["Бандлер"] B --> C["Webpack"] B --> D["Rollup"] B --> E["Parcel"] C --> F["Оптимизированный бандл
Tree-shaking, Разбиение кода
Минификация"] D --> F E --> F

Теперь давайте познакомимся с участниками.

Webpack: швейцарский нож (который иногда заедает)

Webpack — это чемпион среди бандлеров. Он существует с 2012 года, он используется во множестве корпоративных приложений и может справиться практически с любой ситуацией сборки. Это одновременно и его величайшая сила, и его ахиллесова пята.

Плюсы:

  • Бесконечная расширяемость: с помощью лоадеров и плагинов вы можете интегрировать практически что угодно. Нужно обработать Markdown? Есть лоадер. Хотите оптимизировать изображения? Ещё один лоадер. Это LEGO среди бандлеров.
  • Мастерство разбиения кода: встроенное разбиение кода и динамические импорты позволяют создавать более мелкие чанки, загружаемые по требованию. Это приводит к более быстрой начальной загрузке страниц, что означает более счастливых пользователей и потенциально лучшие рейтинги SEO.
  • Расширенные механизмы кэширования: долгосрочные механизмы кэширования обеспечивают эффективное кэширование активов браузерами при разных развертываниях, сокращая время загрузки для вернувшихся посетителей.
  • Зрелая экосистема: экосистема плагинов огромна. Что бы вам ни понадобилось, кто-то, вероятно, уже это построил.

Минусы:

  • Сложность конфигурации: конфигурационные файлы Webpack могут разрастаться до сотен строк. То, что начинается как простая настройка, часто превращается в загадочный файл .js, который никто не хочет трогать, потому что «он работает».
  • Время сборки: универсальность Webpack сказывается на производительности. Для больших проектов сборка может занимать заметно больше времени.
  • Кривая обучения: документация всеобъемлющая, но это потому, что вам нужна всеобъемлющая документация, чтобы во всём разобраться.

Когда выбирать Webpack

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

Практический пример Webpack

Вот базовая конфигурация Webpack, которая обрабатывает JavaScript с помощью Babel и CSS:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.[contenthash].css',
    }),
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: 10,
        },
      },
    },
  },
};

Обратите внимание, как мы уже имеем дело с несколькими концепциями: лоадеры, плагины, стратегии оптимизации. Это Webpack вкратце — мощный, но заставляет задуматься.

Rollup: мечта разработчика библиотек

Rollup появился на сцене как специалист-альтернатива Webpack. В то время как Webpack пытался делать всё, Rollup сосредоточился на том, чтобы делать одну вещь исключительно хорошо: создавать оптимизированные, tree-shaken модули.

Плюсы:

  • Превосходство в tree-shaking: Rollup отлично удаляет неиспользуемый код. Если вы импортируете функцию, но никогда её не используете, Rollup её исключает. Это приводит к значительно меньшему размеру бандлов.
  • Фокус на ES-модулях: Rollup был создан с учётом ES-модулей с самого начала. Это приводит к более чистому и эффективному выводу.
  • Быстрое время сборки: для небольших и средних проектов Rollup быстро генерирует оптимизированные бандлы.
  • Оптимизация библиотек: если вы публикуете пакет npm, Rollup — ваш друг. Он создаёт безупречный вывод с минимальными накладными расходами во время выполнения.
  • Мультиформатный вывод: вы можете настроить Rollup на вывод UMD, CommonJS и ES-модулей из одной конфигурации.

Минусы:

  • Менее универсален: обработка CSS и изображений требует дополнительных плагинов. Webpack справляется с этим более плавно из коробки.
  • Нет встроенного HMR: Hot Module Replacement не встроен в Rollup, что делает разработку менее плавной, чем у конкурентов.
  • Меньшая экосистема: меньше плагинов по сравнению с обширной библиотекой Webpack.

Когда выбирать Rollup

Выбирайте Rollup при публикации npm-пакетов, библиотек компонентов дизайн-системы или любого кода, который будут использовать другие команды. Он идеален для встраиваемых виджетов или SDK, где размер бандла имеет значение и каждый килобайт на счету.

Практический пример Rollup

Вот конфигурация Rollup для переиспользуемой библиотеки компонентов:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';
export default [
  {
    input: 'src/index.js',
    output: [
      {
        file: 'dist/mylib.cjs.js',
        format: 'cjs',
      },
      {
        file: 'dist/mylib.esm.js',
        format: 'es',
      },
      {
        file: 'dist/mylib.umd.js',
        format: 'umd',
        name: 'MyLib',
      },
    ],
    external: ['react', 'react-dom'],
    plugins: [
      resolve(),
      commonjs(),
      babel({
        exclude: 'node_modules/**',
        presets: ['@babel/preset-react'],
      }),
      terser(),
    ],
  },
];

Эта конфигурация выводит вашу библиотеку в трёх разных форматах из одного источника. Обратите внимание на опцию external — мы говорим Rollup, что React предоставляется потребителем, а не бандлом нашей библиотеки. Это библиотечное мышление.

Parcel: альтернатива для тех, кто просто хочет писать код

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

Плюсы:

  • Отсутствие конфигурации: TypeScript, JSX и CSS работают из коробки без дополнительных лоадеров или плагинов. Серьёзно, просто пишите свой код.
  • Скорость разработки: первые сборки занимают меньше секунды для небольших приложений, а циклы горячей перезагрузки остаются близкими к 10 мс. Это практически мгновенное удовлетворение.
  • Встроенные функции: Hot Module Replacement интегрирован по умолчанию. Поддержка многоязычности включает JavaScript, TypeScript и другие.
  • Автоматическое разбиение кода: Parcel обрабатывает разбиение кода через интеллектуальные настройки по умолчанию. Вам даже не нужно об этом думать.
  • Фокус на опыт разработчика: весь инструмент разработан с учётом того, чтобы разработчики были довольны.

Минусы:

  • Ограниченная настройка: ручные настройки компоновки чанков и экзотические требования к сборке быстрее