Сборка для production-среды

На этой странице приведены рекомендации по сборке приложения, использующего компоненты Lit, для production-среды. Рекомендации по этапам сборки, которые нужно выполнить над исходным кодом перед публикацией переиспользуемого компонента Lit в npm, см. в разделе Публикация.

При сборке приложения с компонентами Lit можно использовать распространённые инструменты сборки JavaScript, такие как Rollup или webpack, чтобы подготовить исходный код и зависимости к запуску в production-среде.

Полный список требований к сборке кода Lit, применимых как к разработке, так и к production-среде, см. в разделе Требования.

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

Проекты Lit, как и другие веб-проекты, выигрывают от оптимизаций на этапе сборки. При запуске приложений Lit в production-среде рекомендуется применять следующие оптимизации:

• Объединение модулей JavaScript для сокращения количества сетевых запросов (например, с помощью Rollup или webpack).
• Минификация кода JavaScript для уменьшения размера передаваемых данных (Terser хорошо подходит для Lit, поскольку поддерживает современный JavaScript).
• Передача современного кода современным браузерам, поскольку обычно он компактнее и быстрее, с переходом на скомпилированный код в старых браузерах.
• Хеширование статических ресурсов, включая объединённые файлы JavaScript, для упрощения сброса кэша.
• Включение сжатия при передаче (например, gzip или brotli), чтобы уменьшить объём передаваемых данных.

Кроме того, учтите, что шаблоны Lit определяются внутри строковых литералов шаблонов JavaScript, поэтому стандартные минификаторы HTML их не обрабатывают. Подключение плагина для минификации HTML в строковых литералах шаблонов может немного уменьшить размер кода. Для этой оптимизации доступны несколько пакетов:

• Rollup: rollup-plugin-minify-html-literals
• Webpack: minify-html-literals-loader

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

Настроить Rollup для объединения проекта можно разными способами. Проект Modern Web поддерживает отличный плагин Rollup @web/rollup-plugin-html, который помогает объединить ряд лучших практик сборки приложений в удобный пакет. Ниже описаны примеры конфигурации с использованием этого плагина.

Приведённый ниже файл rollup.config.js с комментариями позволяет собрать приложение, соответствующее требованиям к сборке для современных браузеров и оптимизациям для production-среды, описанным на этой странице. Эта конфигурация подходит для запуска в современных браузерах, способных выполнять JS ES2021 без полифилов.

Необходимые модули Node.js:

npm i --save-dev rollup \
  @web/rollup-plugin-html \
  @web/rollup-plugin-copy \
  @rollup/plugin-node-resolve \
  @rollup/plugin-terser \
  rollup-plugin-minify-html-literals \
  rollup-plugin-summary

rollup.config.js:

// Import rollup plugins
import html from '@web/rollup-plugin-html';
import {copy} from '@web/rollup-plugin-copy';
import resolve from '@rollup/plugin-node-resolve';
import {terser} from '@rollup/plugin-terser';
import minifyHTML from 'rollup-plugin-minify-html-literals';
import summary from 'rollup-plugin-summary';

export default {
  plugins: [
    // Entry point for application build; can specify a glob to build multiple
    // HTML files for non-SPA app
    html({
      input: 'index.html',
    }),
    // Resolve bare module specifiers to relative paths
    resolve(),
    // Minify HTML template literals
    minifyHTML(),
    // Minify JS
    terser({
      ecma: 2021,
      module: true,
      warnings: true,
    }),
    // Print bundle summary
    summary(),
    // Optional: copy any static assets to build directory
    copy({
      patterns: ['images/**/*'],
    }),
  ],
  output: {
    dir: 'build',
  },
  preserveEntrySignatures: 'strict',
};

Запуск сборки Rollup:

rollup -c

Редактировать эту страницу