优化地图性能的核心是“按需加载+分散压力+减少体积”：路由级懒加载地图模块，动态加载第三方SDK并防错，GeoJSON改TopoJSON、点数据聚合、瓦片多子域并发，服务端缓存与CDN加速协同。
核心是“按需加载 + 分散压力 + 减少体积”。地图组件卡顿，往往不是渲染慢，而是初始加载时一股脑把大库、全量图层、原始地理数据全塞进来。优化重点不在等它快，而在让它“别一次性来”。
路由级懒加载，让地图模块不拖累首页
别在 main.js 或入口文件里 import 天地图、Leaflet、ECharts。把整个地图页面（包括其依赖）拆成异步组件：
- 用 defineAsyncComponent 包裹地图页组件，配合 loading 状态提示用户
- 确保父路由组件不提前 import 地图相关代码，否则预加载失效
- 如果使用 Vue Router，配置
component: () => import('./views/MapPage.vue')即可，无需额外封装
第三方地图库动态加载，避免白屏阻塞
天地图、高德、百度等 JS SDK 体积大（常超 500KB），同步引入会阻塞 HTML 解析。正确做法是：
- 移除 index.html 中的 script 标签，改用 动态创建 script 标签 或 动态 import 封装的 SDK 加载器
- 在地图组件 mounted 后再触发加载，加载完成后再初始化地图实例
- 加防错逻辑：检查
window.T（天地图）或window.AMap是否存在，避免Cannot read property 'Map' of undefined
地理数据与图层分片加载，降低单次负担
GeoJSON 文件动辄几 MB？直接 parse 渲染必然卡顿。优化手段很直接：
立即学习“Java免费学习笔记（深入）”；
- 优先用 TopoJSON 替代 GeoJSON，体积通常压缩 70%~80%，D3 或 Leaflet 都支持解析
- 对点数据超过 1000 个的场景，用 MarkerClusterGroup 聚合，避免一次性创建上千 DOM 节点
- 瓦片底图启用 多子域并发：天地图提供 t0–t7 共 8 个子域，配置
subdomains: ['0','1','2','3','4','5','6','7']可提升 3~5 倍 tile 加载速度
服务端与缓存协同，缩短网络链路
前端优化有上限，后端配合能突破瓶颈：
- 若项目已部署 SuperMap iServer 或类似 GIS 服务，可将天地图请求代理过去，并开启服务端瓦片缓存，重复请求直接返回本地缓存
- CDN 加速静态资源：把自定义图层、图标、TopoJSON 文件托管到 CDN，利用边缘节点就近响应
- HTTP 缓存头设置合理：地图瓦片设
Cache-Control: public, max-age=86400，避免重复拉取相同切片
