Сборка для 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 ES2019 без полифилов.

Необходимые модули 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: 2020,
      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

Следующая конфигурация создаёт гибридную сборку с двумя наборами файлов JS: один для современных браузеров, другой — для устаревших. Файлы для современных браузеров предварительно загружаются с оптимистичным предположением, а обнаружение возможностей на стороне клиента определяет, загружать ли меньшую и более быструю современную сборку или сборку для устаревших браузеров (и все необходимые полифилы) в соответствии с требованиями к сборке для устаревших браузеров.

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

npm i --save-dev rollup \
  @web/rollup-plugin-html \
  @web/rollup-plugin-polyfills-loader \
  @web/rollup-plugin-copy \
  @rollup/plugin-node-resolve \
  @rollup/plugin-babel \
  @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 polyfillsLoader from '@web/rollup-plugin-polyfills-loader';
import {copy} from '@web/rollup-plugin-copy';
import resolve from '@rollup/plugin-node-resolve';
import {getBabelOutputPlugin} from '@rollup/plugin-babel';
import {terser} from 'rollup-plugin-terser';
import minifyHTML from 'rollup-plugin-minify-html-literals';
import summary from 'rollup-plugin-summary';

// Configure an instance of @web/rollup-plugin-html
const htmlPlugin = html({
  rootDir: './',
  flattenOutput: false,
});

export default {
  // Entry point for application build; can specify a glob to build multiple
  // HTML files for non-SPA app
  input: 'index.html',
  plugins: [
    htmlPlugin,
    // Resolve bare module specifiers to relative paths
    resolve(),
    // Minify HTML template literals
    minifyHTML(),
    // Minify JS

Если вы используете lit-html как автономную библиотеку шаблонов, можно следовать почти всем рекомендациям по сборке с Lit. Единственное отличие состоит в том, что lit-html не требует полного набора полифилов Web Components. Вам понадобится только полифил шаблонов.

Чтобы запустить lit-html в Internet Explorer 11, который не поддерживает элемент <template>, понадобится полифил. Можно использовать полифил шаблонов, входящий в состав полифилов Web Components.

Установите полифил шаблонов:

npm i @webcomponents/template

Используйте полифил шаблонов:

<script src="./node_modules/@webcomponents/template/template.min.js"></script>

Примечание. При компиляции для IE11 полифилы Babel необходимо объединить отдельно от кода приложения и загрузить до полифила шаблонов.

Изменить эту страницу