解决Vue首屏加载速度慢的问题

前端开发中，特别是使用Vue开发的小伙伴对首屏加载速度慢的问应该是深有体会了，然而仔细分析原因，还是因为我们引入的第三方资源太过于庞大，而服务器的带宽有限，造成首屏加载速度缓慢，接下来我给大家建议几种解决思路，好了废话不多说，直接上代码

1.使用Vue-router懒加载，当路由被访问的时候才加载对应组件，当构建的项目比较大的时候，懒加载可以分割代码块，提高页面的初始加载效率。

第一种写法

const routers = [ { path: '/', name: 'index', component: (resolve) =>require(['./views/index.vue'], resolve) } ]

第二种写法

constIndex = () =>import(/* webpackChunkName: "group-home" */'@/views/index') const routers = [ { path: '/', name: 'index', component: Index } ]

第三种写法

const Index = r =>require.ensure([], () => r(require('./views/index')), 'group-home'); constrouters = [ { path: '/', name: 'index', component: Index } ]

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

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

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

一、资源引入

在index.html中，添加CDN资源，例如bootstrap上的资源：

<body>

</body>

二、添加配置

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

module.exports = {

entry: {

app: './src/main.js'

externals:{

'vue': 'Vue',

'vue-router': 'VueRouter',

'vuex':'Vuex'

}

三、去掉原有的引用

去掉import，如：

// import Vue from 'vue'

// import Router from 'vue-router'

去掉Vue.use(XXX)，如：

// Vue.use(Router)

最后重新npm run build，会看到 vendor.js体积有所下降了，将所有的外部模块，使用CDN引入之后，通过开发者模式的Network工具，可以看到vue.js、vuex.js、vendor.js等文件会分别由一个线程进行加载。且因为使用了CDN，减轻了带宽压力

3.开启gzip压缩，谁用谁知道，开启gzip压缩之后vender.js直接压缩了一半，大大提高了首屏加载速度，不得不说真的很强大!

4.还有图片懒加载，减少http请求，按需导入，异步加载，预加载等等都可以优化首屏加载速度慢

以上便是我解决Vue首屏加载速度慢的思路，当然还有其他更好的解决办法，也希望各位前端大神多多指教!