Vue 动态引入外部js文件

场景

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

那么我们考虑通过引入外部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;
    // IE
    if (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',//路径
            },
          },
        );
      },
    },
  },
}