vue cli3 h5配合Nginx开启gizp和http2优化首次加载速度

本文链接：https://blog.csdn.net/ngl272/article/details/103712960

前言：

最近部署vue写的项目，由于公司服务器带宽较小，第一次加载时间相当长，体验不是很好，于是查找相关资料，进行了一些优化，效果还不错。

1. Vue 发布构建时打包成Gzip压缩

安装compression-webpack-plugin

	npm install compression-webpack-plugin --save-dev

配置vue.config.js

// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css']
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/hmi-admin/'
    : '/',
  productionSourceMap: false,//不生成map，js混淆加密
  lintOnSave: false,
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost',
        ws: true,
        changeOrigin: true
      },
      '/rrpc': {
        target: 'http://localhost',
        ws: true,
        changeOrigin: true
      },
      '/image': {
        target: 'http://localhost',
        ws: true,
        changeOrigin: true
      }
    }
  },
  //统一配置打包插件
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),//匹配文件名
        threshold: 10240,//对10K以上的数据进行压缩
        minRatio: 0.8,
        deleteOriginalAssets: false,//是否删除源文件
      })
    ]
  }
}

2. 服务器Nginx开启gzip压缩配置

	gzip on; # 开启Gzip
	gzip_static on; # 开启静态文件压缩
	gzip_min_length  10k; # 不压缩临界值，大于10K的才压缩
	gzip_buffers     4 16k;
	gzip_http_version 1.1;
	gzip_comp_level 2;
	gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss; # 进行压缩的文件类型
	gzip_vary on;
	gzip_proxied   expired no-cache no-store private auth;
	gzip_disable   "MSIE [1-6]\.";

3. 服务器Nginx开启http2配置

server {
    listen 443 ssl http2;
	listen [::]:443 ssl http2;
	}

完整配置如下：


server {
        listen *:80;
        listen *:443 ssl http2; 
        listen [::]:80;
        listen [::]:443 ssl http2; 
        server_name xxxxxxxx.com;

        ssl_certificate  xxxxxxxx;
		ssl_certificate_key xxxxxxxxxxx; 
        return 301 https://xxxxxxxx$request_uri;
}

server {
    listen 443 ssl http2;
	listen [::]:443 ssl http2;
    server_name xxxxxxx; 
    ssl on;
    root /var/www/html/www;
    index index.html index.htm index.php;
    ssl_certificate xxxxxx;
    ssl_certificate_key xxxxxxxxxxxxx;
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4:!DH:!DHE;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
	#减少点击劫持
    #add_header X-Frame-Options DENY;
    #禁止服务器自动解析资源类型
    #add_header X-Content-Type-Options nosniff;
    #防XSS攻击
    add_header X-Xss-Protection 1;
	add_header Strict-Transport-Security "max-age=31536000";
	
	gzip on; # 开启Gzip
	gzip_static on; # 开启静态文件压缩
	gzip_min_length  10k; # 不压缩临界值，大于10K的才压缩
	gzip_buffers     4 16k;
	gzip_http_version 1.1;
	gzip_comp_level 2;
	gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss; # 进行压缩的文件类型
	gzip_vary on;
	gzip_proxied   expired no-cache no-store private auth;
	gzip_disable   "MSIE [1-6]\.";
}