Compression

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

Минификация JavaScript и CSS

Stencil автоматически использует Rollup в качестве сборщика модулей. Минификация происходит на этапе сборки и включает:

  • Удаление всех комментариев и неиспользуемого кода.
  • Сокращение имён переменных и функций.
  • Оптимизацию структуры кода для уменьшения объёма.

Для включения минификации достаточно правильно настроить stencil.config.ts:

import { Config } from '@stencil/core';

export const config: Config = {
  namespace: 'my-component-library',
  buildEs5: true,
  minifyJs: true,
  minifyCss: true,
  outputTargets: [
    {
      type: 'www',
      serviceWorker: null,
    },
  ],
};
  • minifyJs: true — включает минификацию JavaScript.
  • minifyCss: true — минимизирует встроенные и внешние стили.

Gzip и Brotli сжатие

Помимо минификации, важной практикой является сжатие бандла на уровне сервера с помощью Gzip или Brotli. Stencil позволяет интегрировать это через настройку серверной сборки или внешние инструменты.

  • Gzip — стандартный метод, поддерживаемый всеми современными браузерами.
  • Brotli — более современный метод с лучшей степенью сжатия.

Пример использования Gzip через Node.js при раздаче Stencil-приложения:

import express from 'express';
import compression from 'compression';
import path from 'path';

const app = express();

app.use(compression());
app.use(express.static(path.join(__dirname, 'www')));

app.listen(3000, () => console.log('Server running on port 3000'));

Здесь compression() автоматически сжимает все исходящие файлы.

Lazy-loading и разделение кода

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

  • Lazy-loading компонентов позволяет загружать только те компоненты, которые реально используются на странице.
  • Каждый компонент Stencil компилируется в отдельный JS-файл при настройке outputTargets с lazyLoad:
outputTargets: [
  {
    type: 'dist',
    esmLoaderPath: '../loader',
    dir: 'dist/components',
  },
],

Оптимизация изображений и ресурсов

Хотя Stencil не занимается напрямую обработкой изображений, практика compression включает:

  • Использование WebP или AVIF вместо PNG/JPG.
  • Минификация SVG с помощью svgo.
  • Загрузка изображений через <img srcset> или lazy-loading.

Tree-shaking

Stencil интегрирован с Rollup, который выполняет tree-shaking — удаление неиспользуемого кода. Это особенно важно при создании библиотек компонентов:

  • Экспортируются только реально используемые элементы.
  • Сокращается размер бандла и ускоряется загрузка.

Source maps и production сборка

Source maps важны для разработки, но их включение в production увеличивает размер бандла. Для максимальной compression:

export const config: Config = {
  sourceMap: false,
  minifyJs: true,
  minifyCss: true,
};

Отключение source maps для продакшн-сборки уменьшает объем файлов на клиенте.

Профилирование и анализ бандла

Stencil предоставляет инструмент stencil-analyzer и сторонние решения вроде rollup-plugin-visualizer, которые позволяют:

  • Определить самые тяжёлые компоненты.
  • Выявить дублирующийся код.
  • Принять меры по оптимизации и дальнейшему сжатию.

Настройка дополнительных плагинов

Для ещё более глубокой оптимизации можно использовать плагины Rollup:

  • rollup-plugin-terser для агрессивной минификации.
  • rollup-plugin-brotli для автоматической генерации Brotli файлов.
  • rollup-plugin-cleanup для удаления лишних пробелов и комментариев.

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

Оглавление