Обработка нескольких HTML-файлов

При работе с Parcel многократные HTML-файлы рассматриваются как независимые точки входа приложения. Каждый HTML-документ становится самостоятельным графом зависимостей, который Parcel анализирует, собирает и оптимизирует. Такой подход характерен для мультистраничных приложений (MPA), где каждая страница представляет отдельный маршрут с собственным набором скриптов и стилей.

Parcel не требует конфигурационного файла для поддержки нескольких HTML-страниц. Достаточно передать все HTML-файлы в качестве entry points при запуске сборки.

Базовая структура мультистраничного проекта

Типичная структура проекта с несколькими HTML-файлами:

project/
├── src/
│   ├── index.html
│   ├── about.html
│   ├── contact.html
│   ├── index.js
│   ├── about.js
│   ├── contact.js
│   └── styles/
│       └── main.css
└── package.json

Каждый HTML-файл содержит собственную точку входа в Jav * aScript:

<!-- index.html -->
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./styles/main.css" />
  </head>
  <body>
    <h1>Главная</h1>
    <script type="module" src="./index.js"></script>
  </body>
</html>
<!-- about.html -->
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>О проекте</h1>
    <script type="module" src="./about.js"></script>
  </body>
</html>
<!-- contact.html -->
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>Контакты</h1>
    <script type="module" src="./contact.js"></script>
  </body>
</html>

Запуск Parcel с несколькими HTML entry points

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

parcel src/index.html src/about.html src/contact.html

Каждый HTML-файл обрабатывается как отдельный граф:

  • анализируются <script> и <link>
  • собираются зависимости JavaScript, CSS, изображения
  • создаются независимые HTML-страницы в dist/

Результат сборки:

dist/
├── index.html
├── about.html
├── contact.html
├── index.hash.js
├── about.hash.js
└── contact.hash.js

Hash-суффиксы обеспечивают кэш-безопасность и автоматическое обновление ресурсов.

Автоматическое разделение зависимостей

Parcel строит отдельные dependency graph для каждой страницы, но при этом выполняет глобальную оптимизацию:

  • общие модули выносятся в shared chunks
  • повторяющиеся зависимости не дублируются
  • код автоматически разделяется по точкам использования

Пример общего модуля:

// src/utils/api.js
export function request(url) {
  return fetch(url).then(r => r.json());
}

Использование в разных страницах:

// index.js
import { request } from "./utils/api";

request("/api/home");
// about.js
import { request } from "./utils/api";

request("/api/about");

Parcel выделяет api.js в общий бандл, если он используется более чем в одной точке входа.

Связывание страниц между собой

В мультистраничной архитектуре навигация осуществляется через обычные ссылки:

<nav>
  <a href="./about.html">О проекте</a>
  <a href="./contact.html">Контакты</a>
</nav>

Parcel сохраняет структуру путей и корректно переносит их в dist, не требуя специальной маршрутизации.

Обработка ассетов в нескольких HTML-файлах

Каждый HTML-файл может независимо импортировать ресурсы:

<link rel="stylesheet" href="./styles/main.css" />
<img src="./images/logo.png" />

Parcel выполняет следующие операции:

  • копирует изображения в dist с хешированием
  • преобразует CSS в оптимизированные бандлы
  • автоматически переписывает пути в итоговом HTML

Пример результата:

<link rel="stylesheet" href="/main.8fd3a2.css" />
<img src="/logo.1c9d4e.png" />

Разделение JavaScript по страницам

Каждая HTML-страница получает собственный JavaScript-бандл:

  • index.html → index.js
  • about.html → about.js
  • contact.html → contact.js

Это позволяет:

  • уменьшить начальный вес каждой страницы
  • изолировать логику страниц
  • ускорить загрузку за счёт отсутствия лишнего кода

Общие зависимости и оптимизация бандлов

Parcel использует алгоритм анализа графа модулей для выявления пересечений.

Если несколько страниц используют одну библиотеку:

import lodash from "lodash";

Parcel:

  • выделяет lodash в отдельный shared chunk
  • подключает его только один раз
  • кэширует результат между страницами

Динамические импорты в мультистраничной сборке

Дополнительное разделение достигается через import():

button.addEventListener("click", async () => {
  const module = await import("./heavy-module.js");
  module.init();
});

Parcel:

  • создаёт отдельный chunk для heavy-module.js
  • загружает его по требованию
  • не включает в основной бандл страницы

Параллельная обработка HTML-файлов

Parcel использует многопоточную архитектуру:

  • каждый HTML-файл обрабатывается как отдельная задача
  • анализ AST выполняется параллельно
  • сборка ассетов распределяется по worker-процессам

Это особенно важно при большом количестве страниц (10–100+).

Watch-режим для нескольких HTML

Запуск в режиме разработки:

parcel src/index.html src/about.html src/contact.html

Поведение:

  • отслеживание изменений во всех HTML-файлах
  • мгновенная пересборка затронутой страницы
  • HMR (Hot Module Replacement) для JS и CSS
  • обновление только изменённого графа

Изменение about.js не приводит к пересборке index.html.

Обработка вложенных директорий

Parcel поддерживает структуру с подкаталогами:

src/
├── pages/
│   ├── index.html
│   ├── about.html
│   └── contact.html

Запуск:

parcel src/pages/*.html

Или через явное перечисление:

parcel src/pages/index.html src/pages/about.html src/pages/contact.html

При этом выходная структура сохраняется:

dist/
├── index.html
├── about.html
├── contact.html

Кэширование и инкрементальная сборка

Parcel использует контентно-адресуемый кэш:

  • изменения в одном HTML-файле не инвалидируют остальные
  • повторное использование модулей ускоряет сборку
  • пересборка ограничивается изменённым графом

Это критично для больших MPA-проектов, где количество HTML-файлов велико.

Обработка одинаковых шаблонов страниц

При наличии шаблонной структуры:

<!-- layout.html -->
<header>...</header>
<main></main>
<footer>...</footer>

Parcel не выполняет серверную композицию, но позволяет:

  • импортировать общий JS для всех страниц
  • использовать shared CSS
  • поддерживать единый дизайн без дублирования логики

Особенности путей и базового URL

Parcel автоматически вычисляет корректные пути:

  • относительные ссылки сохраняются
  • абсолютные пути корректируются под dist
  • вложенные страницы не ломают ассеты

Пример:

/pages/about.html → /about.html

Типовые ошибки при работе с несколькими HTML-файлами

Дублирование entry point логики

Если несколько HTML подключают один и тот же JS напрямую без структуры модулей, может возникнуть избыточная загрузка.

Неправильные относительные пути

Ошибки вида:

<script src="../index.js"></script>

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

Игнорирование shared modules

Отсутствие централизованных модулей увеличивает размер бандлов.

Масштабирование мультистраничной архитектуры

При увеличении числа HTML-файлов Parcel сохраняет производительность за счёт:

  • параллельной обработки графов
  • дедупликации модулей
  • агрессивного кэширования
  • разделения чанков по точкам входа

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

Оглавление