Vue项目部署后页面加载首次很慢的优化方案

1.前言

将Vue项目打包后部署到服务器下的Nginx后，发现页面首次加载时会特别慢，甚至到了20s~30s，通过浏览器调试工具可以查看加载慢的资源文件，其中最主要的是js文件和一些图片。明确了导致加载慢的原因，下面总结了一些对这些资源文件加载的优化方案：

2.图片优化方案

1.直接将图片压缩到尽可能小、尽可能可以忍受的极限。

2.使用CDN加速资源，国内常见的CDN资源加速服务提供商如：七牛云；

3.将图片压缩为webp格式，兼容性不好。另外就是我在引入webp时编译出错，也就没做过多的探索了；

4.升级服务器带宽。

3.项目资源文件

1.去掉编译文件中map文件：
在项目打包好后，可以看到文件夹下有很多.map文件，这些文件主要是帮助我们进行线上代码调试，查看样式。为了避免部署包过大，通常都不生成这些文件。

webpack 构建的项目结构下，在 config/index.js 文件中将productionSourceMap 的值设置为false. 再次打包就可以看到项目文件中已经没有map文件

webpack-simple 构建的项目结构下，在webpack.config.js文件种将sourceMap的值设置为false。

以上参数可直接通过IDE的快捷搜索工具定位。

2.vue-router 路由懒加载：
这里只提供一种较常见的方法。它主要是使用了resolve的异步机制，用require代替了import,实现按需加载，下面是代码示例：

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
  routes: [

//     {//		非懒加载
//       path: '/',
//       name: 'HelloWorld',
//       component: HelloWorld
//     }
       {//		懒加载
         path: '/',
         name: 'HelloWorld',
         component: resolve => require(['@/components/HelloWorld'], resolve)
       }
  ]
}) 

通过懒加载后打包的js文件会很多，而非懒加载的打包后一般只有一个js文件。
3.使用gzip压缩：
首先安装compression-webpack-plugin：

cnpm install --save-dev compression-webpack-plugin@1.1.12

然后进行配置：

webpack 构建的项目结构下，在/config/index.js 下修改productionGzip 为true：
然后 build/webpack.prod.conf.js 文件中添加配置：

// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css'];
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
     filename: '[path].gz[query]',
     algorithm: 'gzip',
     test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
     threshold: 10240,
     minRatio: 0.8
   })
)

webpack-simple 构建的项目结构下，在webpack.config.js文件中添加配置，添加位置如下，内容与webpack构建下相同：

最后在Nginx配置开启zgip，在server上面添加：

# 开启gzip
gzip on;
# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;
# 设置压缩所需要的缓冲区大小
gzip_buffers 16 64k;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.1;
# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 3;
gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding，建议开启       
gzip_vary on;

重启nginx(linux下)：./nginx -s reload，发现js也是压缩的后的文件了