Vuecli3之性能优化篇

1. 压缩项目大小

1. 编写vue.config.js。压缩生成的js文件。

const CompressionPlugin = require('compression-webpack-plugin');//引入gzip压缩插件

 configureWebpack: config => {
        return {
           plugins:[ new CompressionPlugin({//gzip压缩配置
            test:/\.js$|\.html$|\.css/,//匹配文件名
            threshold:10240,//对超过10kb的数据进行压缩
            deleteOriginalAssets:false,//是否删除原文件
            filename: '[path].gz[query]',
            algorithm: 'gzip',
            // test: productionGzipExtensions,
            // threshold: 2048,
            // minRatio: 0.8
          })]
        }

    },

2. 需要对服务器进行设置，使之支持gzip格式的js文件。

server {
            listen 88;
            server_name localhost;
 
            location / {
                gzip on;
                gzip_min_length 1k;
                gzip_buffers 16 64k;
                gzip_http_version 1.1;
                gzip_comp_level 9;
                gzip_types text/plain text/javascript application/javascript image/jpeg image/gif image/png application/font-woff application/x-javascript text/css application/xml;
                gzip_vary on;
                root html/subCharge;
                index index.html index.htm;
            }
 
            location /api {
                # rewrite  ^/apis/(.*)$ /$1 break;
                proxy_pass   http://47.92.34.130:8080/chargeSub/;
            }
 
         }

2. 路由懒加载

vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

3. 使用cdn的方式外部加载一些资源