vue-cli3 项目使用cdn优化首屏加载慢

作为一个网站应用，加载速度是非常重要的。加载速度，一个是程序的合理安排，如以组件按需加载，一个是js、css等资源的异步加载。

在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。

解决方法是，将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的。

外部的库文件，可以使用CDN资源，或者别的服务器资源等。

通常我们需要优化加载速度的时候，在众多的优化当中，可以使用link代替import，避免过多的import让加载变慢。那在vue里面应该怎么优化尼。国内的CDN服务推荐使用 BootCDN，国外还是不要用了.......

下面，以引入vue、vuex、vue-router为例，说明处理流程。

方法一

1.在index.html中，添加CDN资源

2.在vue.config.js文件中，增加externals，将引用的外部模块导入，如下：

configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    // 使用cdn
    externals: {
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'axios': 'axios',
      'element-ui': 'ELEMENT'
    }
  },

3.然后修改src/router/index.js

// 注释掉
// import Vue from 'vue'
import VueRouter from 'vue-router'
// 注释掉
// Vue.use(Router)

4.修改 src/store/index.js

// 注释掉
// Vue.use(Vuex)

5.最后修改 src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import ELEMENT from 'element-ui'
Vue.use(ELEMENT)

import axios from 'Axios'
Vue.prototype.$axios= axios

new Vue({
  el: '#app',
  router: router,
  store: store,
  render: h => h(App)
})

方法二(vue-element-admin官网教程)

1.先找到 vue.config.js， 添加 externals 让 webpack 不打包 vue 和 element等一些要放cdn的

configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    // 使用cdn
    externals: {
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'axios': 'axios',
      'element-ui': 'ELEMENT'
    }
  }
//注意一点：
格式为 'aaa' : 'bbb', 其中，aaa表示要引入的资源的名字，bbb表示该模块提供给外部引用的名字，由对应的库自定。例如，vue为Vue，vue-router为VueRouter.
//注意，这里 element-ui 变量名要使用 ELEMENT，因为element-ui的 umd 模块名是 ELEMENT

2.然后配置那些第三方资源的CDN，请注意先后顺序。

const cdn = {
  css: [
    // element-ui css
    'https://cdn.bootcss.com/element-ui/2.7.2/theme-chalk/index.css'
  ],
  js: [
    // vue必须在第一个
    'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
    'https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js',
    'https://cdn.bootcss.com/vue-router/3.0.6/vue-router.min.js',
    'https://cdn.bootcss.com/axios/0.18.1/axios.min.js',
    'hhttps://cdn.bootcss.com/element-ui/2.7.2/index.js'
  ]
}

3.之后通过 html-webpack-plugin注入到 index.html之中:

config.plugin('html').tap(args => {
  args[0].cdn = cdn
  return args
})

4.找到 public/index.html。通过你配置的CND Config 依次注入 css 和 js。

  
  <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
    
  <% } %>



<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
  
<% } %>

随后执行方法一的3，4，5
这个时候项目页面就可以看到 vuejs 的加载源了

image.png