Векторные карты в MapLibre GL JS строятся из множества независимых ресурсов: тайлов, стилей, шрифтовых глифов, спрайтов и изображений слоёв. Каждый из этих компонентов загружается по HTTP(S), что делает сетевую подсистему критическим фактором производительности. Серверное кэширование определяет, насколько быстро клиент может собирать карту и как часто происходит повторная загрузка идентичных данных.
MapLibre GL JS обращается к нескольким типам ресурсов, каждый из которых требует отдельной стратегии кэширования:
Каждый тип имеет собственный жизненный цикл обновления и разную чувствительность к устареванию данных, что требует дифференцированного подхода к HTTP-кешу.
Типичный векторный тайл в MapLibre GL JS запрашивается по схеме:
/tiles/{z}/{x}/{y}.pbf
Или через шаблоны:
https://tiles.example.com/streets/{z}/{x}/{y}.vector.pbf
Кэширование тайлов эффективно только при стабильности URL-структуры. Любое изменение параметров запроса (query string, заголовки авторизации) снижает вероятность попадания в CDN cache hit ratio.
Наиболее критичные заголовки:
Cache-Control: public, max-age=31536000, immutable
Используется для неизменяемых тайловых наборов. Векторные тайлы часто генерируются батчами и версионируются.
ETag: "tile-v3-48291"
Позволяет клиенту и CDN выполнять условные запросы. Особенно полезен при динамически обновляемых наборах данных.
Last-Modified: Tue, 10 Jun 2026 12:00:00 GMT
Используется как fallback механизм для кэшей, не поддерживающих ETag.
Одним из наиболее эффективных подходов является внедрение версионирования в путь ресурса:
/tiles/v3/{z}/{x}/{y}.pbf
или через хеш данных:
/tiles/8f3a91c/{z}/{x}/{y}.pbf
Такой подход позволяет задавать максимально агрессивный кэш:
Cache-Control: public, max-age=31536000, immutable
Обновление данных приводит к изменению версии, что автоматически инвалидирует кэш без необходимости purge на CDN уровне.
MapLibre GL JS практически всегда работает в связке с CDN, так как количество запросов на тайлы может достигать десятков тысяч в минуту на одного пользователя при активном перемещении карты.
CDN кэширует:
.pbf тайлы.png/.jpg тайлы.png) и метаданные
(.json)При корректной конфигурации cache hit ratio достигает 95–99%, снижая нагрузку на origin-сервер.
Файл стиля (style.json) является точкой входа для всей
карты. Он содержит ссылки на источники данных и описание слоёв.
Cache-Control: public, max-age=3600
или при версионировании:
Cache-Control: public, max-age=31536000, immutable
Стиль обновляется значительно реже тайлов, но чаще, чем базовые геоданные.
Изменение стиля может привести к:
Поэтому стиль часто связывается с версией сборки фронтенда:
style-v12.json
Sprite в MapLibre GL GL JS состоит из двух файлов:
sprite.pngsprite.jsonСпрайты являются полностью статическими ресурсами при сборке:
Cache-Control: public, max-age=31536000, immutable
Любое изменение иконок приводит к генерации нового sprite atlas, что полностью исключает необходимость частичной инвалидации.
Глифы загружаются по диапазонам:
/fonts/{fontstack}/{start}-{end}.pbf
Пример:
/fonts/Open Sans Regular/0-255.pbf
Рекомендуемые заголовки:
Cache-Control: public, max-age=31536000, immutable
Классическая схема:
proxy_cache_path /data/nginx/cache levels=1:2 keys_zone=tiles:10g max_size=100g inactive=60d;
Конфигурация:
location /tiles/ {
proxy_cache tiles;
proxy_cache_valid 200 301 302 365d;
proxy_cache_use_stale error timeout updating;
add_header X-Cache-Status $upstream_cache_status;
}
Nginx эффективно кэширует тайлы на диске, уменьшая обращения к backend.
Varnish применяется для более сложной логики:
Пример VCL:
if (req.url ~ "\.(pbf|png|jpg)$") {
set req.ttl = 365d;
}
При использовании S3-совместимых хранилищ:
Заголовки задаются на уровне объекта:
aws s3 cp tile.pbf s3://bucket/tiles/ --cache-control "public,max-age=31536000,immutable"
MapLibre GL JS использует параллельную загрузку ресурсов:
Загружается style.json
Инициализируются источники
Параллельно запрашиваются:
Browser cache и HTTP cache CDN работают совместно:
Существует три основных подхода:
Наиболее стабильный метод:
/tiles/v5/{z}/{x}/{y}.pbf
Инвалидация происходит автоматически.
Используется при невозможности версионирования:
Недостаток — высокая стоимость и задержки.
Пример:
Cache-Control: public, max-age=300, must-revalidate
Используется для динамических данных.
Факторы, влияющие на эффективность:
/tiles/{z}/{x}/{y}.pbf?token=abc
Сильно снижает cache hit ratio.
Приводит к необходимости постоянного purge.
Вызывает рассинхронизацию между стилем и тайлами.
Разделение ресурсов:
Усложняет кросс-кэширование.
Эффективная система кэширования требует согласованности между:
Любое расхождение в TTL или версии приводит к артефактам:
Высочайшая эффективность кэширования.
Баланс между гибкостью и производительностью.
Используется в аналитических и real-time системах.
При росте нагрузки:
MapLibre GL JS при интенсивном pan/zoom генерирует burst-запросы, которые эффективно сглаживаются только многоуровневым кэшированием.
Метрики:
Эти показатели определяют устойчивость карты под нагрузкой и корректность конфигурации HTTP-кэша.