Vue项目使用CDN进行项目优化

前言

自己搭建了一个vue项目放置在那种带宽1M的服务器上，我打开我项目首页那是真的卡啊，起码得10s，然后就按照各种疯狂搜索如何优化，经过各种优化后，打开速度那简直就是 起飞，废话不多说，直接上代码。

项目介绍

本项目，vue-cli版本为：2.x，可能部分配置会不一样。

 // 所需依赖
 "vue": "^2.5.2",
 "iview": "^3.5.1",
 "vuescroll": "^4.14.4"
 "vue-router": "3.0.1"

第一步：使用CDN引入所需依赖

<!-- vue-cli 2.x在项目根目录 index.html -->
<!-- vue-cli 4.x在项目根目录 public\index.html -->
<!-- 引入 Vue.js -->
<script src="//cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<!-- 引入 Vue-router -->
<script src="//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<!-- 引入vuescroll -->
<script src="//unpkg.com/vuescroll"></script>
<!-- 引入 iView -->
<script src="//unpkg.com/view-design/dist/iview.min.js"></script>

在这一步引入的iView我没有引入其css，为什么呢？因为我发现我要是在这里引入其css的话会导致其部分样式不生效，但是在main.js内引入就可以，具体原因不详，希望知道的朋友告诉我。

// 在main.js内引入
import 'iview/dist/styles/iview.css'

第二步：配置webpack

• vue-cli 2.x：在项目根目录：bulid/webpack.base.conf.js下进行配置
• vue-cli 4.x：在项目根目录新建一个vue.config.js，然后进行同样的配置

// 找到module.exports，在其中添加externals对象
// 这里配置CDN引入的内容
// 要注意大小写，我记得element-ui的好像是纯大写。
 externals: {
    'vue': 'Vue',
    'iview': 'iView',
    'vuescroll': 'vuescroll',
    'vue-router': 'VueRouter'
 }

第三步：依赖配置

本来在如vue-router、vuex这种里面还要导入vue,然后Vue.use(xxx)，但是如果是使用cdn引入的话，不需要这么写。
以router文件举例。
cdn前：

// router/index.js
// 原先的写法
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

cdn后：

// 使用cdn后的写法
// 虽然看到很多博文里面不会写这么一句，但是我觉得还是加上会比较好
// 可能你会想这不就导入了本地的vue-router吗？但是可惜的是，我本地没有安装vue-router
import VueRouter from 'vue-router'

//其他部分就按平常的一样就可以

然后在main.js内正常导入就ok了。

// main.js
import App from './App'
import Vue from 'vue'
import router from './router'
import 'iview/dist/styles/iview.css'
import api from './http/api'

// 做一些你要的配置

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

最后一步：打包起飞。

npm run build

然后放置在服务器上，就可以感受到速度快了很多，大家可以看看我的项目。我的项目地址。