Vue单页面应用首屏加载时间优化

vue全家桶

我们习惯用vue-cli搭建脚手架，再配合vue-router控制路由，vuex控制状态及复杂组件通讯，实现顺畅的spa应用，但是往往在项目应用插件框架时后首屏加载时间非常长。故此可做一些优化。

缩小webpack打包生成的包的大小

这里我们需要尽可能的减少生产环境下依赖的库数量，比如element如果可以的话需要什么组件就引入什么组件，而不是在main.js全局引入。开始优化的时候，就不知道从何处优化起，而且根本不知道生成的包中哪个依赖占据着空间，哪个库占用的空间最多。 所以有个webpack-bundle-analyzer的分析工具。安装：

$ npm install --save-dev webpack-bundle-analyzer

在webpack.prod.conf.js中配置

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins: [
new BundleAnalyzerPlugin(
     {
          analyzerMode: 'server',
          analyzerHost: '127.0.0.1',
          analyzerPort: 8888, // 运行后的端口号
          reportFilename: 'report.html',
          defaultSizes: 'parsed',
          openAnalyzer: true,
          generateStatsFile: false,
          statsFilename: 'stats.json',
          statsOptions: null,
          logLevel: 'info'
        }
     ),
]

这样后配置完成了，正常npm run build 结束后，就会自动打开一个打包生成文件的模块组成图在默认浏览器中，图中面积大的就是占据空间大的模块。

20190708.png

服务端渲染

服务端渲染不同于后端渲染,服务端渲染只是把当前的前端框架中的一部分js代码放到服务器上渲染，加载到浏览器上的html就不是一个空页面，这样可以减少首页的白屏时间，同时提高被搜索引擎检索的机会。服务端渲染有不少的局限，例如它的服务端必须依靠node服务器，我们可以使用使用基于vue的nuxt.js脚手架去开发，会减去繁琐的配置过程。

使用cdn或预加载

将一部分静态的页面直接渲染成html写在生成的index.html中，这种方式在加载完index.html后，就会有界面展示出来，无需等待加载js代码后再去渲染，所以这种方式也可以显著的减少首屏加载时间，也可以提高被搜索引擎检索的机会，同时预渲染的配置很简单，容易上手。

或者使用cdn把一些必要的库在index.html里面引入进去这样也能加快加载速度。

动态路由分块加载

这种优化，就是将每个组件的js代码独立出来，在使用到这个组件时，才向服务器请求文件，并且请求过一次后就会缓存下来，再次使用到这个组件时，就会使用缓存，不再发送请求。
配置很简单，只需要在vue-router中添加一些简单的配置即可

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router);

export default new Router({
  mode: 'history',
  linkActiveClass: 'router-link-active',
  routes: [
    {
      path: '/',
      // 这里只需要把原来从外部引入的组件换成以下的语句就可以了
      component: resolve => require(['../components/(你的组件)'], resolve)
    },
  ]
})