新しいモジュール式アーキテクチャGL JS 、より軽量で高速Mapbox GL JS

Mapbox GL JS には、パフォーマンスを低下させることなく高度なレンダリング機能でGL JS 強化するという多段階の取り組みの一環として、新しい高解像度（HD）「モジュール」が搭載されました。HD機能を他のすべてのレンダリング機能と共に単一のバンドルとして提供するのでなく、モジュール化されたHD機能は必要な場合にのみ読み込まれます。

ほとんどの開発者にとって、GL JS により、最初にダウンロードされるJavaScriptの量が大幅に減り、その結果、バンドルサイズが小さくなり、ページの初期読み込みが速くなります。

JavaScriptバンドルのサイズを小さくして、マップをより高速に配信しましょう

GL JS から最も多く寄せられていた要望の一つは、JavaScriptバンドルのサイズを小さくすることでした。以前は、Mapbox GL JS 、プラットフォームで利用可能なすべてのレンダリング機能を網羅した単一のライブラリとしてGL JS 。データ可視化や、店舗検索、ダッシュボード、3Dや高解像度の詳細が表示されない低ズームの地図といった位置情報関連のアプリケーションを開発する開発者は、たとえアプリケーション内でそれらの機能が一切使用されない場合でも、高度な機能を含むライブラリ全体をダウンロードする必要がありました。

GL JS 、より詳細な地図機能をサポートするようにGL JS につれ、コアライブラリのサイズも当然ながら大きくなりました。モジュール化により、高度な機能を必要としないユーザーにとって、高度な機能によってJavaScriptバンドルのサイズやダウンロード・解析にかかる時間、帯域幅の使用量が増加することはなくなります。

Mapbox GL JSの新しいモジュール型アーキテクチャ

GL JS により、高度なレンダリング機能はオプションのモジュールに分割されています。HDモジュールは最初にリリースされたモジュールであり、以下の機能が含まれています：

• HDの道路の詳細
• 高架線のレンダリング
• 建物のファサードのディテールの詳細化
• 空港の屋内マップ
• 雨や雪のレンダリング効果
• 3Dランドマークモデル

GL JS で Mapbox Standard Styleを使用する場合、デフォルトではコアとなるレンダリングエンジンのみがダウンロードされます。開発者がスタイルの設定でHDモジュールを含めるように指定すると、追加の設定を必要とせずにバックグラウンドで自動的に読み込まれます。その結果、高度なレンダリング機能へのアクセスを維持しつつ、デフォルトでの動作が高速化されます。

起動GL JS 操作開始までの処理が高速化されたGL JS

新しいモジュール型アーキテクチャにより、GL JS 実際に必要な場合にのみ、高度なレンダリング機能を読み込むGL JS 可能になりました。HDモジュールを必要としない開発者は、JavaScriptバンドルのサイズが10～15％削減されるというメリットを享受でき、アプリケーションの起動を高速化するとともに、不要なネットワーク負荷やCPU負荷を軽減することができます。

この新しいモジュール型アーキテクチャは、GL JS .24で導入された一連のレンダリングエンジンの最適化を基盤としており、これによりリソース割り当て、スレッド効率、およびアセットのコンパイルが体系的に改善されました。こうした基盤となるパフォーマンスの向上と新しいモジュール型アーキテクチャが相まって、Mapbox 新機能をMapbox 拡張性を維持できる、より高速で効率的なレンダリングエンジンが実現されています。

アイドル状態になるまでの時間が最大50%短縮され、マップが完全に安定し、視覚的にも完成し、操作可能になるまでの時間が半分になります。

クライアントデバイス全体でCPUおよびメモリの使用率が低下したため、バッテリー消費が抑えられ、低スペックのハードウェアでもパフォーマンスが向上しました。

新しいモジュール式アーキテクチャを有効にする方法

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

NPMをご利用の方へ

既存のインポートを、ESMのエントリポイントを使用するように変更し、マップのインスタンス化時にアクセストークンを直接指定するようにしてください：

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>

デフォルトで軽量。設計上、高性能。

HDモジュールは、GL JSモジュール化に向けた包括的なロードマップにおける最初のマイルストーンです。今後のリリースでは、専用のレンダリングシステムを独立して読み込まれるモジュールへと引き続き分離していくことで、Mapbox 、あらゆるアプリケーションのベースラインコストを増やすことなく、より高度なマッピング機能を導入Mapbox 。