1、概述

在沒有壓縮本地js，css的文件下，部署線上環(huán)境時，訪問頁面加載極慢，網(wǎng)上搜了一下，果然有相應(yīng)的解決辦法，特此記錄一下。還可以用cdn的方式，后面再看

2、步驟

在項目下打開命令窗口 -D ： 寫入devDependencies，只用于開發(fā)環(huán)境，不用于生產(chǎn)環(huán)境
-S ：需要發(fā)布到生產(chǎn)環(huán)境的

npm install compression-webpack-plugin -D

在項目根目錄新建 vue.config.js，一定注意，和src同級

const compressionPlugin = require('compression-webpack-plugin')
module.exports={
    publicPath:"./", //線上部署添加
    
    devServer:{
        port:'8088',
        proxy:{
            '/api': {
                target: 'http://localhost:8081/api',//代理地址
                changeOrigin: true,//是否允許開啟代理
                pathRewrite: {//代理地址重寫
                  '^/api': ''
                }
        }
        
    }
},
configureWebpack: config=>{
    if(process.env.NODE_ENV=='production'){
        return {
            plugins:[
                new compressionPlugin({
                    test: /\.js$|\.html$|\.css/,
                    threshold:10240,
                    deleteOriginalAssets:false
                })
            ]
        }
    }
}

}

nginx.conf設(shè)置開啟gzip

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    gzip  on;   #開啟gzip
    gzip_min_length 1k; #低于1kb的資源不壓縮
    gzip_comp_level 3; #壓縮級別【1-9】，越大壓縮率越高，同時消耗cpu資源也越多，建議設(shè)置在4左右。
    gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;  #需要壓縮哪些響應(yīng)類型的資源，多個空格隔開。不建議壓縮圖片，下面會講為什么。
    gzip_disable "MSIE [1-6]\.";  #配置禁用gzip條件，支持正則。此處表示ie6及以下不啟用gzip（因為ie低版本不支持）
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
    sendfile        on;
    keepalive_timeout  65; 
    
    server {
        listen       8088;
        server_name  localhost;

        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }
        location ^~ /api/ {
          #rewrite  ^/api/(.*)$ /$1 break;
          proxy_pass http://ip地址:8081;
        }
        
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }    

}

3、預(yù)估加載速度對比（vue-ui）

實測環(huán)境下也非常快

在這里插入圖片描述

實際環(huán)境

在這里插入圖片描述