前言

最近在腾讯云上面买了一个服务器，准备把最近写好的一个vue项目打包部署上去，然后直接npm run
build,把它往nginx上面一扔，然后直接访问，一顿操作下来，首屏加载时间28s！！！正常人哪能接受这么长度加载时间（当然，服务器也有一些问题，最低配置）无奈，只得潜心修行项目优化之道。

一、优化静态资源

首先查看页面资源，好家伙，图片3s（喜欢用大文件），字体28s。
找到第一个问题，静态资源体积过大，于是项目中所有的静态资源文件统统压缩扔进OOS，然后用CDN加速之后，首屏时间变成19s了，还是好慢！继续排查。

二、vue项目打包体积优化

继续检查网页加载时资源加载时间特别久的文件，发现了一个罪魁祸首在这里插入图片描述
原来vue项目打包的时候，会把所有的js文件全部打包成一个js，然后在打开第一个页面的时候，一次性全部加载。得知这个原因之后，立马开始进行vue项目的优化。

1.路由懒加载

vue项目首次加载时会一口气把所有页面的js和css文件全部加载出来，使用路由懒加载可以让页面按需加载，当需要使用到时再加载对应的资源。

const Home = r => require.ensure([],() => r(require('../views/Home.vue')), 'Home')
const Edit = r => require.ensure([],() => r(require('../views/content/Edit.vue')),'Edit')
const Index = r => require.ensure([],() => r(require('../views/Index.vue')), 'Index')

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/index',
    name: 'index',
    component: Index
  },
  {
    path: '/edit',
    name: 'edit',
    component: Edit
  },
]

这样在打包的时候这些页面文件就会和chunk-vendors.js文件分开打包了
在这里插入图片描述

2.抽离第三方js库

将第三方js库使用CDN引入，然后再vue.config.js文件中，配置externals
在这里插入图片描述

3.小结

做完以上两步后，chunk-vendors.js文件变成57KB
在这里插入图片描述

三、代码优化

1.减少页面的重排和重绘

（1）重排：指当页面出现部分或者全部元素尺寸变化，对整个页面进行重新布局
（2）重绘：指当元素出现样式上的改变时，重新渲染该部分元素的样式
ps.重排必定引起重绘，而重绘不一定会引起重排
优化方法：减少js修改style属性的操作，尽量直接修改class，或者在修改前，先将元素的display值设置为none，修改完毕之后，再设置为block，这样页面只会做两次重排重绘

2.多设置key值

了解了一下vue的diff算法，vue在做局部更新时，是先通过diff算法计算新旧dom的区别，再进行修改，而对比需要元素的key值，所以，尽量多的设置元素的key属性可以使页面修改的性能得到很大的提示。

四、服务器优化

1.nginx服务器开启gzip文件压缩

在这里插入图片描述

2.nginx服务器开启http2

 	listen 443 ssl http2; #增加http2
  
    #开启ssl并添加证书
    ssl_certificate /usr/share/nginx/ssl/volit.crt;
    ssl_certificate_key /usr/share/nginx/ssl/volit.key;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP;
    ssl_prefer_server_ciphers on;