vue优化之CND优化

问题: vue 打包(npm run build)之后, vendor.js文件过大, 导致首页加载速度非常慢, 影响体验效果, 原因是第三方库(vue , vue-router , element-ui , axios )都打包在vendor.js 文件中

解决方法

使用 CND 优化
CND 优化是指把第三方库(vue , vue-router , element-ui , axios )通过外链的形式引入到项目目中, 减少打包时 vendor.js 文件的体积, 以加快页面访问速度

使用方法

1. 在项目根目录中找到 index.html , 把需要用到的资源用过 CDN 的方式引入该文件中, 如图:
   推荐几个相对稳定的外链地址 bootcdn , staticfile, jsdelivr
   
   如果担心cdn引入的外链出现问题, 可以使用两个不同的外链地址, 毕竟同事出现问题的几率还是比较小的
   
   注: vue-router 引入两次页面会报错
   
   原因: vue-router 加载两次时, 页面会有报错, 意思是vue-router 不能注册两次, 虽然正常使用, 但是页面报错还是需要解决一下
   解决办法: 方法1: vue-router 安装到本地, 方法二: vue-router只加载一次

若是担心cdn 不稳定, 则可以使用,静态资源加载的方法(即 当cdn加载失败的时候, 加载静态资源)

if (typeof Vue == 'undefined') {
  document.write(unescape("%3Cscript src='/static/js/vue/2.5.16/vue.min.js'%3E%3C/script%3E"))
}
if (typeof VueRouter == 'undefined') {
  document.write(unescape("%3Cscript src='/static/js/vue-router/3.0.1/vue-router.min.js'%3E%3C/script%3E"))
}
if (typeof Vuex == 'undefined') {
  document.write(unescape("%3Cscript src='/static/js/vuex/3.0.1/vuex.min.js'%3E%3C/script%3E"))      
}
if (typeof axios == 'undefined') {
  document.write(unescape("%3Cscript src='/static/js/axios/0.18.1/axios.min.js'%3E%3C/script%3E"))
}

2. 在 build/webpack.base.conf.js 文件中进行配置
   externals: {
   ‘vue’: ‘Vue’,
   ‘vue-router’: ‘VueRouter’,
   ‘element-ui’: ‘ELEMENT’,
   ‘axios’: ‘axios’
   },
   
3. 去掉引入的文件
   去掉import 引入
   去掉Vue.use(XXX)
   
   使用 cdn外链后, npm run build 打包能明显的感觉到 vendor.js 变小很多, 页面相应速度也会变快