问题引出

作为一个网站应用，加载速度是非常重要的。

而当程序的功能愈来愈多，引入的外部组件资源愈来愈多，打包后的js包，就会愈来愈大。

在开发环境下可能感觉不到，因为一开始dev的时候就已经把所有资源的都加载进来了，

而当生成环境时，部署到服务器之后，访问程序你会发现，网址敲下后，到网站应用的首页完整呈现在浏览器之间，耗费了大量的时间，

我们称该阶段为首屏加载

首屏加载速度过慢，无疑会消费用户访问该应用的耐心，甚至导致用户之间关闭还未打开的网站。

说到提升加载速度，一般更多的是想到两个方面

  • 一是vue-router进行页面的懒加载
  • 一是引入CDN资源js、css等的异步加载。

当然还有很多其他的方式，图片压缩，gzip压缩等等（暂不去说服务器带宽）

解决方案

引入CDN资源的异步加载原理：

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

主页面文件引入

1
2
3
4
5
6
7
8
9
10
11
12
 ...
 
<div id="app">
</div>
<script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://unpkg.com/element-ui@2.3.7/lib/index.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.min.js"></script>

...

注：外部的库文件，可以使用CDN资源，也可以是别的服务器资源等

我上面引入的资源是针对我最近开发的项目的，你的引入针对自己的项目而定。

在这里我有些使用了bootstrap上的资源，而element-ui我没找到对应的，所有用了unpkg.com上的
两个平台分别是：

配置

加了上面的代码是不够了，这样之间打包反而会报错。

在bulid/webpack.base.conf.js文件中，增加externals，将引用的外部模块导入

1
2
3
4
5
6
7
8
externals:{
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex':'Vuex',
  'axios': 'axios',
  'echarts': 'echarts',
  'element-ui': 'ELEMENT',
},

注意对应的字段名，不是乱写的，若有其他的引入资源，可自行查找对应的字段名。

注释

其实这样就可以了的，可我之前了解这方面知识的时候，看了很多网友写的，做完前面两步，还得注释掉之前的引入

1
2
3
4
5
// import Vue from 'vue'
// import Router from 'vue-router'

// Vue.use(Router)
......

其实这也一步是为了在开发环境下也用cdn方式引入，但我最近开发的程序不方面这么做，故没有做这一步，有需求的朋友可以加上。

注意

1.注意我上面的做法只是针对生产环境，即在开发环境下，要注释掉，当然有些网友也会说在开一个index.html,分生产环境和开发环境，省得去注释了，可我目前懒得弄 /笑哭

2.注：vue.js引用会带来一些问题，element若要以这种方式引入的话，Vue已应当以这种方式引入，否则无效甚至报错。