动态加载 js 和 css 文件

动态加载 js 和 css 文件

场景

是这样的，我使用了一个编辑器的插件，但是需要用到关于代码高亮的js和css，文件内容太大， 下载到项目内打包后太占地方了。

• 于是就想着能不能动态加载，只在用编辑器的时候在按需加载
• 这样的话用了远程的文件，也省了自己的带宽

开始整

想要加载js，就需要给添加script元素

/**
 * 动态加载js
 */
function loadScript(url, callback) {
    let scriptDom = document.createElement("script")
    scriptDom.src = url;
    scriptDom.onload = () => {
        console.log("加载成功");
        callback(true)
    }
    scriptDom.onerror = () => {
        console.log("加载失败");
        callback(false)
    }
    document.body.appendChild(scriptDom)
}

搞定，我们来测试下

let url = "https://cdn.bootcdn.net/ajax/libs/vue/2.7.4/vue.min.js";
loadScript(url,()=>{
    console.log(Vue);
})


// 加载成功
// ƒ wr(t){this._init(t)}

就是这样简单，举一反三，写一个css的

/**
 * 动态加载css
 */
function loadCss(url, callback) {
    let linkDom = document.createElement("link")
    linkDom.href = url;
    linkDom.rel = "stylesheet";
    linkDom.onload = () => {
        console.log("加载成功");
        callback(true)
    }
    linkDom.onerror = () => {
        console.log("加载失败");
        callback(false)
    }
    document.head.appendChild(linkDom)
}

思考

以上的写法是可以功能的，但是还不够完善。

• 已经加载了二次加载怎么办。
• 是不是这里可以结合jsonp提升以下。
• 加载完成后，Child 是否可以删除掉。