高地地图异步加载

415 阅读1分钟

摘要: 最近发现首页加载开始变慢了,然后开始追踪导致变慢的原因,发现高德地图加载可以优化,考虑到首页没有地图相关业务,所以改为异步加载高德地图。

// 异步加载高德地图API
export async function loadAmp() {
    const amp = await asyncAmp();
    const ampUi = await asyncAmpUi();
    return { amp, ampUi };
};
export function asyncAmp() {
    return new Promise(function(resolve, reject) {
        const amapId = document.getElementById('amap');
        if (amapId) return resolve(window.AMap);
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=你的key';
        script.id = 'amap';
        script.onerror = function() {
            // eslint-disable-next-line prefer-promise-reject-errors
            reject({ampError: '高德地图加载失败'});
        };
        script.onload = function(su) {
            resolve(window.AMap);
        };
        document.head.appendChild(script);
    });
}
export function asyncAmpUi() {
    return new Promise(function(resolve, reject) {
        const amapUIId = document.getElementById('amapUI');
        if (amapUIId) return resolve(window.AMapUI);
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://webapi.amap.com/ui/1.0/main.js?v=1.0.11';
        script.id = 'amapUI';
        script.onerror = function() {
            // eslint-disable-next-line prefer-promise-reject-errors
            reject({ampError: '高德地图加载失败'});
        };
        script.onload = function(su) {
            resolve(window.AMapUI);
        };
        document.head.appendChild(script);
    });
}