JavaScript异步加载优化实践-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaodingdang222/article/details/115690817

本文探讨了在大型项目中，如使用Vue或React框架时，如何进行JS异步加载优化以提高性能。通过封装一个异步加载方法，实现按需加载需要使用特定JS的页面，从而减少不必要的资源消耗。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                   **在框架中如何进行js的异步加载**

在现在的框架中，我们常常会使用vue或者react框架来搭建我们的项目，随着我们功能的提升和增多，项目优化也将成为我们的重头戏。在这里讲一下如何对项目中引用的js来进行一个异步加载的优化

js: 如下图在static/lib/html2canvas路径有一个html2canvas.min.js

在这里插入图片描述
我们接下来封装一个方法来进行这个js的异步加载

const $loaderScript = function (srcPath) {
    if (sourcePoint[srcPath] && !sourcePoint[srcPath].isLoaded) {
        return new Promise((resolve, reject) => {
            sourcePoint[srcPath].handler.push({ resolve, reject });
        });
    }
    if (sourcePoint[srcPath] && sourcePoint[srcPath].isLoaded) {
        return Promise.resolve();
    }

    sourcePoint[srcPath] = createSource();
    return new Promise((resolve, reject) => {
        let script = document.createElement("script");
        script.src = srcPath;
        script.onload = function () {
            setTimeout(() => {
                sourcePoint[srcPath].isLoaded = true;
                sourcePoint[srcPath].targetHandler("resolve");
                resolve();
            }, 1000 / 60);
        };
        script.onerror = function (e) {
            delete sourcePoint[srcPath];
            reject(e);
            sourcePoint[srcPath].targetHandler("reject");
        };
        document.body.appendChild(script);
    });
};

export { $loaderScript }; //将$loaderScript导出

需要使用js的页面：

import { $loaderScript } from "@/util/prototypeUtil.js";
 $loaderScript('./static/lib/html2canvas/html2canvas.min.j').then(() => {
       //js成功加载的 promise回调，在这里处理自己的事件
    });