动态加载 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 = "/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是否可以删除掉。