Rollup конфигурация

Slim.js — это лёгкая библиотека для создания веб-компонентов с реактивностью и минимальным оверхедом. Для крупных проектов важно правильно настроить сборку с помощью Rollup, чтобы обеспечить эффективный бандлинг, поддержку модулей и совместимость с браузерами.

Структура конфигурационного файла

Rollup использует файл rollup.config.js для определения входных точек, плагинов, форматов выходных файлов и других параметров сборки. Типовая структура для проекта на Slim.js выглядит так:

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';
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';

export default {
  input: 'src/main.js',
  output: [
    {
      file: 'dist/bundle.js',
      format: 'iife',
      name: 'App',
      sourcemap: true
    },
    {
      file: 'dist/bundle.esm.js',
      format: 'esm',
      sourcemap: true
    }
  ],
  plugins: [
    resolve(),
    commonjs(),
    babel({ babelHelpers: 'bundled', exclude: 'node_modules/**' }),
    terser(),
    serve({ open: true, contentBase: ['dist'], port: 3000 }),
    livereload('dist')
  ]
};

Ключевые моменты:

  • input — указывает главный файл приложения, который импортирует все компоненты Slim.js.

  • output — массив с разными форматами бандла:

    • iife для запуска прямо в браузере без системы модулей.
    • esm для современных сборщиков и динамического импорта.

  • sourcemap: true позволяет отлаживать код в исходных файлах.

  • Плагины обеспечивают:

    • Поддержку Node-модулей (resolve, commonjs).
    • Транспиляцию ES6+ через Babel.
    • Минификацию кода (terser).
    • Автоматический локальный сервер и live reload для разработки (serve, livereload).

Разделение кода и оптимизация

Для крупных проектов важна модульная структура. Slim.js компоненты обычно лежат в отдельных файлах внутри src/components/. Rollup позволяет использовать код-сплиттинг через динамический импорт:

const buttonModule = () => import('./components/Button.js');
buttonModule().then(module => {
  module.default();
});

В конфигурации Rollup добавляется output.dir вместо output.file:

output: {
  dir: 'dist',
  format: 'esm',
  entryFileNames: '[name].js',
  chunkFileNames: '[name]-[hash].js',
  sourcemap: true
}

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

Работа с плагинами Slim.js

Slim.js не требует специального Rollup-плагина, но рекомендуется использовать babel-plugin-transform-slim для оптимизации реактивных свойств и улучшения tree-shaking. В babel.config.js можно прописать:

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: "> 0.25%, not dead" }]
  ],
  plugins: ['transform-slim']
};

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

Настройка разработки и продакшена

Для разделения конфигураций можно использовать rollup.config.dev.js и rollup.config.prod.js с общим базовым конфигом:

  • Development

    • Включает serve и livereload.
    • Sourcemaps включены.
    • Минификация отключена для удобной отладки.

  • Production

    • Минификация через terser.
    • Sourcemaps можно отключить или хранить отдельно.
    • Локальный сервер не нужен.

Пример объединения через merge:

import merge from 'deepmerge';
import baseConfig from './rollup.config.base.js';

const devConfig = merge(baseConfig, {
  plugins: [/* дополнительные плагины для dev */]
});

export default devConfig;

Поддержка браузеров

Slim.js ориентирован на современные браузеры, но для проектов, где требуется поддержка старых версий, Rollup можно совместить с Babel и polyfill:

babel({
  babelHelpers: 'bundled',
  exclude: 'node_modules/**',
  presets: [
    ['@babel/preset-env', { targets: { ie: '11' }, useBuiltIns: 'usage', corejs: 3 }]
  ]
})

Это гарантирует, что реактивные свойства Slim.js и динамические импорты корректно работают даже в IE11 или старых версиях Edge.

Оптимизация производительности

  • Tree-shaking — Slim.js компоненты легко оптимизируются благодаря модульной структуре.
  • Minification — terser убирает лишние пробелы, комментарии, сокращает имена функций и переменных.
  • Dynamic import — позволяет загружать тяжёлые компоненты по мере необходимости.
  • Code splitting по страницам — для SPA каждая страница может иметь отдельный чанк, уменьшая общий вес основного бандла.

Использование окружений

Переменные окружения помогают включать/отключать функционал в зависимости от среды:

import replace from '@rollup/plugin-replace';

plugins: [
  replace({
    'process.env.NODE_ENV': JSON.stringify('production')
  })
]

Это позволяет включать debug-логирование в разработке и полностью отключать его в продакшене.

Итоговые рекомендации по структуре

  1. Хранить все Slim.js компоненты в src/components/.
  2. Основной входной файл (main.js) импортирует корневой компонент.
  3. Разделять конфигурации на dev/prod.
  4. Использовать Babel и terser для транспиляции и минификации.
  5. Применять динамический импорт для тяжёлых или редко используемых компонентов.
  6. Обеспечивать sourcemaps для отладки.

Такой подход обеспечивает высокую производительность, лёгкость поддержки и удобную отладку больших проектов на Slim.js.

Оглавление