Production сборка

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

Минификация и удаление лишнего кода

Одной из ключевых особенностей production сборки является минификация. Этот процесс выполняется при помощи инструментов сборки, таких как Webpack, Vite или Rollup, и включает следующие этапы:

  • Удаление пробелов, переносов строк и комментариев.
  • Переименование локальных переменных и функций для сокращения размера.
  • Элиминирование неиспользуемого кода (tree shaking), что особенно важно при работе с библиотеками, где импортируются только необходимые функции.

Для Preact рекомендуется использовать preact/compat совместно с @babel/preset-env для преобразования кода в максимально оптимизированный вид.

Оптимизация JSX

Preact использует JSX-трансформацию, которая отличается компактностью и высокой скоростью выполнения. В production сборке:

  • JSX-теги преобразуются в вызовы h() функции Preact.
  • Атрибуты компонентов и обработчики событий оптимизируются для минимизации лишнего кода.
  • Инлайновые стили и функциональные компоненты подвергаются агрессивной оптимизации, уменьшая нагрузку на VDOM.

Для этого важно включить @babel/plugin-transform-react-jsx с настройкой pragma: 'h' и pragmaFrag: 'Fragment'.

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

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

import { lazy, Suspense } from 'preact/compat';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Загрузка...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}
  • lazy откладывает загрузку компонентов до момента их использования.
  • Suspense обеспечивает отображение заглушки до полной загрузки компонента.
  • Такая стратегия сокращает начальный размер бандла и ускоряет первую отрисовку страницы.

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

В production сборке важно минимизировать размер статических файлов:

  • Изображения сжимаются с помощью imagemin, svgo для SVG и WebP формата для растровых изображений.
  • CSS и шрифты подвергаются минификации и объединению.
  • Использование preload и prefetch для критичных ресурсов повышает производительность.

Использование Preact CLI и Vite

Для быстрой настройки production сборки Preact предоставляет Preact CLI:

preact build
  • Автоматически выполняет минификацию, tree shaking и оптимизацию ассетов.
  • Генерирует оптимизированный index.html с ссылками на минимизированные скрипты и стили.
  • Поддерживает gzip и brotli сжатие.

При использовании Vite:

vite build
  • Включает быстрый бандлинг и поддержку ES модуля.
  • Автоматически применяет esbuild для минификации кода, что значительно ускоряет процесс по сравнению с классическим UglifyJS.
  • Позволяет подключать плагины для анализа размера бандла (rollup-plugin-visualizer) и удаления неиспользуемого CSS.

Оптимизация состояния и контекста

  • Использование signals и минимизация количества стейтов предотвращает лишние ререндеры.
  • Контекст Preact следует использовать экономно, чтобы не перегружать дерево компонентов.
  • Memoization с preact/compat (memo) уменьшает повторные вычисления и повышает производительность.
import { memo } from 'preact/compat';

const ExpensiveComponent = memo(function ExpensiveComponent({ data }) {
  return <div>{data}</div>;
});

Source Maps и дебаггинг

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

  • sourceMap: true в Webpack или Vite позволяет связывать минимизированный код с исходным.
  • Это облегчает анализ ошибок и трассировку багов, не влияя на размер основного бандла.

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

  • Минимизировать размер бандла через tree shaking и динамический импорт.
  • Оптимизировать JSX и использовать функциональные компоненты.
  • Минимизировать и сжимать все статические ресурсы.
  • Использовать Preact CLI или Vite для автоматической настройки production сборки.
  • Ограничивать использование контекста и мемоизацию компонентов для повышения производительности.

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

Оглавление