Mapbox GL JS モジュール式レンダリングにより、バンドルサイズを最大27％削減します

Mapbox GL JS 現在、主要な高度なレンダリング機能を3つのオンデマンド・モジュールに分割しています。これは、今年初めに導入されたモジュール型アーキテクチャを基盤としています。屋内マップ、3Dモデル、地形、地球儀のレンダリングなどの機能は、開発者がマップスタイルでそれらを必要とする場合にのみ、自動的に読み込まれます。

これらの高度な機能を使用しないアプリケーションの場合、モジュール化によりダウンロードおよび処理が必要なJavaScriptの量が大幅に削減され、GL JS のバンドルサイズを最大27%縮小できます。これにより、アプリケーションの軽量化と、ページの初回読み込み速度の向上が実現します。開発者は、高速なデータ可視化、ダッシュボード、店舗検索、その他の日常的な地図利用体験のために、軽量なコアを利用することができます。あるいは、必要に応じて高度な3D機能や環境機能をレンダリングすることも可能です。

軽量性を維持するために構築されたモジュール式アーキテクチャ

以前は、Mapbox （GL JS ）では、レンダリング機能がすべて単一のライブラリにまとめられていました。そのため、比較的軽量なアプリケーションを開発している開発者であっても、実際には使用していない高度なレンダリング機能のコードまでダウンロードせざるを得ませんでした。GL JS で、より豊かな3D機能や高精細な表現、環境表現の機能が追加されるにつれ、コアライブラリも当然ながら規模が拡大していきました。

新しいモジュール型アーキテクチャにより、機能の追加とGL JS のベースラインサイズの拡大との関連性が解消されました。v3.25で導入された最初の「High-detail」モジュールに続き、今回の最新リリースでは、残りの主要なレンダリング機能を専用のESモジュールに移行し、スタイルで呼び出された際に自動的に読み込まれるようにしました。これにより、Mapbox でより高度なレンダリング機能が導入されても、GL JS のコア部分は軽量なまま維持されます。 

コアレンダラーと新しいESモジュール

中核となるレンダリングエンジン

軽量かつ高性能なコアにより、洗練された2Dマップのレンダリング、複雑なインタラクションのサポート、および複数の投影法にわたる処理を実現します。このエンジンは、ビジネスインテリジェンスや物流から、店舗検索機能やその他のデータ豊富なマッピング体験に至るまで、幅広いユースケースに対応するように設計されています。これは、他のすべてのモジュールのレンダリングを支える中核となるものです。

環境モジュール

環境モジュールは、3D地形やドレーピングに加え、グローブビュー機能を提供し、世界全体にわたる滑らかな遷移を実現するとともに、山脈、丘陵、谷にリアルな奥行きを与えます。これは、地形や地球規模の文脈が重要な、アウトドアレクリエーション、海上航行、航空体験において不可欠なものです。

3Dコンテンツモジュール

密集した都市環境における詳細な地図作成において、3Dコンテンツモジュールは、より豊かで没入感のある体験を生み出すために必要なディテールを追加します。建物モデルや手作業で作成された3Dランドマーク、特徴的なランドマークアイコン、3Dの木々、道路標識などをレンダリングします。

高精細モジュール

高精細モジュールでは、車線標示、ランドマークとなる橋、精細な建物の外観、空港の屋内マップ、雨や雪のエフェクト、高架路線などが追加されます。これらの機能により、UAVの運用などのユースケースにおいて、より現実的な状況が再現される一方で、マップはすっきりとしており、ナビゲーションも容易に保たれています。

スペースの節約

以下の図は、モジュール式のGL JS ビルドと、以前のgzip圧縮されたUMDビルドの圧縮後のバンドルサイズを比較したものです。軽量なコアを起点として、環境モジュール、3Dコンテンツモジュール、高詳細モジュールが追加されるにつれて、バンドルサイズは段階的に大きくなっていきます。

コアとなるレンダリングエンジンのみを使用するマップは、すべてのモジュールを必要とするマップに比べて、コードの読み込み量が27％少なくなっています。また、すべてのモジュールを含めた場合でも、以前のgzip圧縮ビルドと比較して、バンドルサイズの最適化とBrotli圧縮のおかげで、ビルドサイズは元のGL JS バンドルよりも14％小さくなっています。

その結果、初期読み込み時間が大幅に短縮されました。

左：オリジナルのGL JS バンドル全体を読み込んでいる様子。右：コアレンダラーが、必要な3Dコンテンツモジュールのみを読み込んでいる様子。

新しいモジュール式アーキテクチャの利用を開始しましょう

新しいモジュール型アーキテクチャを採用するには、GL-JS v3.32 以降にアップデートしてください。その後、UMD バンドルから ESM エントリポイントに切り替えてください。

NPMをご利用の方へ

import * as mapboxgl from 'mapbox-gl/esm';
const map = new mapboxgl.Map({
    accessToken: <ACCESS_TOKEN>,
    container: 'map'...
});

CDNをご利用のお客様へ

First remove the existing <script src> tag from the page:

<script src="https://api.mapbox.com/mapbox-gl-js/v3.25.0/mapbox-gl.js"></script>

次に、CDNから のmapboxglネームスペースを直接インポートし、スクリプトタイプとして「module」を使用するようにしてください：

<script type="module">
import * as mapboxgl from 'https://api.mapbox.com/mapbox-gl-js/v3.25.0/esm/mapbox-gl.js';
const map = new mapboxgl.Map({
    accessToken: <ACCESS_TOKEN>,
    container: 'map'...
});
</script>

FAQ

Mapbox の新しいモジュール型アーキテクチャとは何でしょうか？GL JS ？

Mapbox （GL JS ）向けの、ESモジュールに基づくまったく新しいアーキテクチャです。これは、包括的な単一のバンドルではなく、マップのスタイルに必要なレンダリングコードのみを自動的に読み込む仕組みとなっています。2026年6月に最初のモジュールをリリースし、今回、コアとなるレンダリングエンジンと3つの主要モジュールで構成される完全なモジュール化を実現しました。

ESMエンドポイントへの移行は、アプリのパフォーマンスにどのようなメリットがありますか？

アプリケーションで、高度に詳細な3Dの写実的な表現が必要ない場合（例：位置情報マップ、ダッシュボード、BIツール、読み込みが速いマーケティングページなど）――使用することのない3D地形、ランドマーク、道路や車線の詳細、あるいは屋内マップのコードのダウンロードや解析にかかるコストを、もう支払う必要はありません。ライブラリのサイズは、マップが実際に実行する機能に応じて調整されるべきです。しかし、GL JS は単一のモノリシックなパッケージとして提供されてきたため、実際にはそうではありませんでした。 これを実現するため、GL JS では、スタイルに応じて自動的に遅延読み込みされる4つの主要モジュールが提供されるようになり、開発者はバンドルサイズの最大27%を自動的に削減できるようになりました。これに加え、レンダリングパイプラインの広範な見直し（シェーダーコンパイル、タイルデコード、式解析の高速化、およびメモリ割り当ての削減）や、Brotli圧縮への移行が行われており、これらの改善により、マップの読み込み時間が最大50%もさらに短縮されます。

ESMのエントリポイントに切り替えるにはどうすればよいですか？

アプリをGL JS のESMエントリポイントに切り替えるのは簡単です。ユーザー側でレンダリング機能の設定を行う必要はありません。GL JS は、読み込まれるスタイルを解析し、そのスタイルに必要なモジュールのみを、ページの他の部分と並行して動的にインポートします。 さらに最適化を図りたい場合は、モジュールの構成を理解することで、どのスタイル機能がどのモジュールを呼び出しているかを把握しやすくなります。新しいモジュール型アーキテクチャを採用するには、GL-JS v3.32 にアップデートし、以下のドキュメントの手順に従ってください：https://docs.mapbox.com/mapbox-gl-js/guides/bundler/ 

バンドルのサイズや読み込み時間を短縮するために、他にどのような最適化が行われましたか？

GL JS のCDN経由で配信されるJavaScriptおよびCSSアセットの圧縮方式を、gzipレベル6からBrotliレベル11へとアップグレードいたしました。これにより、Brotli対応ブラウザをご利用のユーザーの約95％において、クライアント側の解凍コストを一切発生させることなく、ESMコアバンドルのサイズを17％削減することができました。 この圧縮の改善とモジュール化の取り組みにより、現在のコアバンドルのサイズはおよそ317KBとなっており、ピーク時と比較して27％の削減を実現しました。 圧縮とモジュール化に加え、レンダリングパイプラインの再設計（アイドル時間中のシェーダーの並列プリコンパイル、ベクタータイル／Protobufのデコード高速化、式および色の解析高速化、メモリ割り当ての削減、3Dモデル読み込みの効率化）により、GL JS のすべてのユーザーにメリットがもたらされています。これにより、どのモジュールが読み込まれるかに関係なく、平均フレーム時間が25％短縮され、アイドル状態に至るまでの時間が最大50％短縮されました。