1、概述

---

在没有压缩本地js，css的文件下，部署线上环境时，访问页面加载极慢，网上搜了一下，果然有相应的解决办法，特此记录一下。还可以用cdn的方式，后面再看

2、步骤

---

在项目下打开命令窗口 -D ： 写入devDependencies，只用于开发环境，不用于生产环境
-S ：需要发布到生产环境的

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设置开启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资源也越多，建议设置在4左右。
    gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;  #需要压缩哪些响应类型的资源，多个空格隔开。不建议压缩图片，下面会讲为什么。
    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、预估加载速度对比（vue-ui）

---

实测环境下也非常快

在这里插入图片描述

实际环境

在这里插入图片描述