推荐使用动态 import() 按需加载地理坐标库，仅在触发坐标转换等操作时加载，封装带缓存的懒加载函数，并与 leaflet/maplibre 协同，在钩子中延迟加载确保执行安全。
在地图组件中按需加载地理坐标库（如 proj4、geolib 或 utm 等），推荐使用 JavaScript 的动态 import() 语法，配合模块拆分与条件触发，避免初始包体积膨胀。关键不是“一加载地图就导入”，而是“当真正需要坐标转换时才加载”。
明确按需时机：只在用到时导入
地理坐标库通常只在特定操作中用到，例如：
- 用户点击“将 WGS84 转为 UTM”按钮
- 导入含自定义坐标系的 GeoJSON 后触发重投影
- 编辑矢量图层前校验坐标合法性
此时再调用 import('./libs/proj4.js')，而非在组件初始化时静态引入。
封装可复用的懒加载工具函数
避免重复写 import()，封装一个带缓存的加载器：
const loadProj4 = (() => {
let instance = null;
return async () => {
if (instance) return instance;
const { default: proj4 } = await import('proj4');
// 可选：预设常用投影定义
proj4.defs('EPSG:32633', '+proj=utm +zone=33 +datum=WGS84 +units=m +no_defs');
instance = proj4;
return proj4;
};
})();
在地图组件方法中直接调用：
async handleReproject(latlng) {
const proj4 = await loadProj4();
return proj4('WGS84', 'EPSG:32633').forward([latlng.lng, latlng.lat]);
}
与主流地图库协同（如 Leaflet / Maplibre）
Leaflet 本身不依赖外部坐标库，但若你扩展了 CRS 支持或写自定义图层，可在图层 onAdd 钩子中加载：
- Maplibre GL：在
map.on('styledata', ...)后按需加载，用于处理源数据坐标系转换 - Leaflet：在
L.Projection自定义类内部延迟加载（不推荐在构造函数里 import，改用静态方法） - 确保加载完成后再执行坐标计算，避免
undefined is not a function
构建与兼容性注意事项
动态 import() 在现代打包工具（Vite、Webpack 5+）中会自动代码分割，生成独立 chunk。需注意：
- 确保构建配置未禁用动态导入（如 Webpack 的
experiments.topLevelAwait = true非必需，但output.chunkFilename应保留） - 若需兼容旧浏览器，需搭配
import()的 polyfill（如dynamic-import-polyfill），但地理类应用通常面向现代环境 - 避免在
import()中传入拼接路径（如import(`./${lib}.js`)），会破坏 tree-shaking 和构建分析
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
