场景

最近在做项目优化时，发现一个特殊依赖，全局只有一个页面会用到。这个依赖很大，而且这个页面极少有人会打开（隐藏页，留给开发或交付人员调试使用的）。

那么我们考虑通过引入外部js的形式来处理，一是不打开这个页面没必要加载对应的依赖，二是减少打包体积。

实现

方式一

在index.html中引入

<script src="../cdn/xxx.js"></script> 

问题：全局初始化加载，不打开对应页面的话用不到，资源浪费

方式二

使用import方式引入

import { xxx } from '../xxx.js'

问题：只能导入本地静态文件

方法三

手动插入js

// 动态加载外部链接
export function loadJS(url) {return new Promise((resolve) => {var script = document.createElement('script');script.type = 'text/javascript';script.src = url;// IEif (script.readyState) {script.onreadystatechange = () => {if (script.readyState == 'loaded'|| script.readyState == 'complete') {script.onreadystatechange = null;resolve();}};} else {// 其他浏览器script.onload = function () {resolve();};}document.getElementsByTagName('head')[0].appendChild(script);})
}

方法四

render-components的方式

export default {components: {'load-xxx-js': {render(createElement) {return createElement('script',{attrs: {type: 'text/javascript',src: '/xxx.js',//路径},},);},},},
}