vue项目加载第3方js优化

项目写到最后需要优化的时候，发现有很多首屏用不到的第3方js都写在index.html里，严重拖慢的网页的加载速度，这里的第3方组件大多不能通过npm或其他模块安装，所以不能直接用vue里的异步组件，比如高德地图的jssdk和它的ui组件，最简单的方法就是在document里插入script。 所以就有了下面的方案。

先定义一个把js插入到document里的方法

# asyncLoadJs.js
export default function asyncLoadJs (url) {
  return Q.Promise((resolve, reject) => {
    let hasLoaded = $('script[src="'+url+'"]').length > 0
    if (hasLoaded) {
      resolve()
      return
    }

    let script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = url
    document.body.appendChild(script)
    script.onload = () => {
      resolve()
    }
    script.onerror = () => {
      reject()
    }
  })
}

在按第3方js依赖的不同 分成各个函数

这里以我项目里的高德地图组件为例，它需要一个主jssdk库和一个提供ui的库，ui库是依赖主库的。

# asyncLoadJs.js
export function loadAMapJS () {
  return Q.Promise((resolve, reject) => {
    asyncLoadJs('https://webapi.amap.com/maps?v=1.3&key=[你自己的key]&plugin=AMap.ToolBar,AMap.Geolocation,AMap.Autocomplete')
      .then(() => {
        return asyncLoadJs('https://webapi.amap.com/ui/1.0/main.js')
      })
      .then(() => {
        resolve()
      })
      .catch(err => {
        reject(err)
      })
  })
}

在组件生命周期中使用异步加载

# position-picker.vue

一个页面有多个第3方组件的问题

如果一个页面有多个第3方组件，那只定义一个是否加载完的标志位是不够的，因为组件基本是同时created的，在dom中插入script标签后都会返回resolve，其实这时js是没有加载完的，这时可以加一个是否是第一次请求js的变量。

# position-picker.vue

注意事项

在computed或watch中，如果需要用到第3方js方法的地方必须先判断第3方js是否加载完，不然会报错的~