vue cli 3 h 5 Nginxと組み合わせてgizpとhttp 2をオンにして初回ロード速度を最適化

前言:
最近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がhttp 2構成を開く

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]\.";
}

参照先:
1. vue cli3.x gzipを開き、速度2を最適化する.高性能Webサイト構築-フロントエンドのパフォーマンス最適化(Vueヘッダのロード時間最適化詳細案付)