Конфигурационные файлы

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

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

Основной конфигурационный файл в проектах Polymer — polymer.json. Он представляет собой JSON-файл, в котором задаются параметры сборки, публикации и тестирования приложения.

Пример базового polymer.json:

{
  "entrypoint": "index.html",
  "shell": "src/my-app.html",
  "fragments": [
    "src/my-view1.html",
    "src/my-view2.html"
  ],
  "sources": [
    "src/**/*",
    "images/**/*",
    "bower.json"
  ],
  "extraDependencies": [
    "manifest.json",
    "node_modules/@webcomponents/webcomponentsjs/*.js"
  ],
  "builds": [
    {
      "name": "bundled",
      "bundle": true,
      "js": {"minify": true},
      "css": {"minify": true},
      "html": {"minify": true}
    }
  ]
}

В этом примере видны основные разделы:

  • entrypoint — главный HTML-файл приложения.
  • shell — оболочка, которая используется как каркас для SPA.
  • fragments — HTML-файлы отдельных фрагментов, которые загружаются по требованию.
  • sources — файлы исходного кода, которые включаются в сборку.
  • extraDependencies — дополнительные файлы, которые должны попасть в сборку.
  • builds — набор конфигураций для сборки (сжатие, бандлинг и оптимизация).

2. Настройка точек входа и фрагментов

Shell является центральным элементом приложения на Polymer. В shell обычно размещаются глобальные компоненты, такие как шапка, навигация и футер. Указание shell в polymer.json позволяет инструментам сборки оптимизировать загрузку и бандлинг.

Fragments используются для ленивой загрузки частей приложения. Для SPA это критично, так как позволяет уменьшить время начальной загрузки. Каждый фрагмент может содержать свой набор компонентов, стилей и скриптов.

3. Источники и зависимости

Секция sources описывает файлы проекта, которые должны быть учтены при сборке. Включение bower.json позволяет автоматически подтягивать зависимости компонентов.

extraDependencies нужны для файлов, которые не находятся в src, но обязательны для работы приложения, например, полифилы Web Components или манифесты PWA.

4. Настройки сборки

Поле builds позволяет создавать несколько вариантов сборки, например:

  • bundled — объединяет все компоненты и ресурсы в минимальное число файлов, снижая количество HTTP-запросов.
  • unbundled — оставляет исходную структуру файлов, удобную для разработки и отладки.
  • es6-bundled — для современных браузеров с поддержкой ES6-модулей.

Каждая сборка может содержать опции минификации для JS, CSS и HTML, что критично для производительности и размера приложения.

"builds": [
  {
    "name": "unbundled",
    "bundle": false,
    "js": {"minify": false},
    "css": {"minify": false},
    "html": {"minify": false}
  }
]

5. Дополнительные параметры

  • npmDependencies — настройка пакетов NPM, которые будут включены в сборку.
  • lint — параметры для линтеров и проверки кода.
  • includeDependencies — позволяет явно указать зависимости компонентов для более точного бандлинга.

6. Использование нескольких конфигураций

Для крупных проектов часто создаются несколько конфигурационных файлов:

  • polymer.json — общая конфигурация проекта.
  • polymer-build.json — специфические параметры сборки для CI/CD.
  • polymer-test.json — отдельная конфигурация для автоматизированного тестирования.

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

7. Советы по оптимизации

  • Минимизировать количество extraDependencies, чтобы не включать ненужные файлы в сборку.
  • Разделять shell и fragments для ускорения загрузки приложения.
  • Использовать отдельные сборки для разработки и продакшена.
  • Следить за актуальностью зависимостей, особенно полифилов Web Components.

Конфигурационные файлы Polymer являются фундаментальным инструментом для управления проектом, сборкой и оптимизацией производительности. Правильное структурирование polymer.json и сопутствующих конфигураций позволяет создавать масштабируемые и быстрые приложения с поддержкой современных веб-стандартов.

Оглавление