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是否加载完,不然会报错的~

你可能感兴趣的:(异步组件,vue.js)