今天在 部署个后台系统到服务器上的时候碰到一个问题：npm run build打包出来单页面项目的时候，出现首次加载特别太慢的问题，加载时间惊人的达到了十多秒，这肯定要优化一下的。
img
在开始之前先看版本情况：
服务器配置：腾讯云的云服务器 1 核 2 GB 1 Mbps
系统：CentOS 7.6
Nginx版本：nginx-1.16.0
前端vue-cli版本：2.9.6
这时候需要去适当做一下项目的优化了。
1、首先从路由懒加载入手，将页面进行划分，让js在需要用到的时候再去加载。
路由懒加载
2、webpack配置gzip
可以vue -V 先看下cli版本，我这边是2.9.6
然后在项目目录里边的config/index.js里边将productionGzip的值默认false设置为ture
productionGzip
3、配置Ngxin开启gzip
打开ngxin的文件夹找到配置文件，添加下面配置。
gzip on; gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.0;
gzip_comp_level 2;
gzip_types text/plain application/javascript application/css text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";
nginx配置
最后看下优化前和优化后的对比：
优化前下图：
Gzip前
优化后下图：
Gzip后
