网页动态加载js,优化首次加载性能


/**
 * @description 动态加载js
 * @param url js地址
 * @returns {Promise} 返回加载状态
 */
 const loadScript =(url) => {
    return new Promise((resolve, reject) => {
        // 判断有没有加载过 有就不加载了
        let scriptList = document.getElementsByTagName('script');
        let isLoad = false;
        for (let i = 0; i < scriptList.length; i++) {
            if (scriptList[i].src === url) {
                isLoad = true;
            }
        }
        if (isLoad) {
            resolve();
            return;
        }
        
        // 动态加载js
        let script = document.createElement("script");
        script.type = "text/javascript";

        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);

        script.onload = function () {
            resolve();
        };
    })
}

使用

let isJsZipReady = ref(false)
loadScript(new URL('../utils/jszip.min.js', import.meta.url).href).then(() => {
    console.info('jszip ready')
    isJsZipReady.value = true
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容