chunk-vendors.js和chunk-common.js过大导致页面访问过慢

项目场景：

vue打包的前端项目加载慢，白屏时间长

---

原因分析：

chunk-vendors.js和chunk-common.js过大导致页面访问过慢

---

解决方案：

1.nginx开启gzip

server {
        listen       80;
        server_name  localhost;
        location / {
            try_files $uri $uri/ /index.html;
            root C:/nginx-1.18.0/html/gzip/dist;
            index  index.html index.htm;
        }
        location /api/ {
            proxy_pass http://localhost:6666/;
        }
        
        # 主要是下方的gizp配置哦，直接复制粘贴就可以使用啦，亲测有效哦
        gzip on; # 开启gzip压缩
        gzip_min_length 10k; # 小于4k的文件不会被压缩，大于4k的文件才会去压缩
        gzip_buffers 16 8k; # 处理请求压缩的缓冲区数量和大小，比如8k为单位申请16倍内存空间；使用默认即可，不用修改
        gzip_http_version 1.1; # 早期版本http不支持，指定默认兼容，不用修改
        gzip_comp_level 2; # gzip 压缩级别，1-9，理论上数字越大压缩的越好，也越占用CPU时间。实际上超过2的再压缩，只能压缩一点点了，但是cpu确是有点浪费。因为2就够用了
                 # 压缩的文件类型 MIME类型，百度一下，一大把                                    # css             # xml             # 识别php     # 图片
        gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/x-woff font/ttf;
                 # text                   # 早期js                 # js        # js的另一种写法                                                                                 # .eot字体                   # woff字体  # ttf字体
        gzip_vary on; # 是否在http header中添加Vary: Accept-Encoding，一般情况下建议开启       
    }

备注：单独使用nginx的gzip会占用cpu资源进行访问资源的压缩，减少cpu占用可提前将项目压缩打包
2.使用compression-webpack-plugin压缩打包资源

#安装compression-webpack-plugin@6.1.1
npm i compression-webpack-plugin@6.1.1 --save
#修改vue.config.js
#引入插件
const CompressionWebpackPlugin = require('compression-webpack-plugin')
#增加配置
module.exports = {
    configureWebpack: config => {
        return {
            plugins: [
                new CompressionWebpackPlugin({
                    cache: false, // 取消缓存
                    // filename: "[path][base].gz", // 输出文件名 这种方式是默认的，多个文件压缩就有多个.gz文件，建议使用下方的写法
                    filename: '[path].gz[query]', //  使得多个.gz文件合并成一个文件，这种方式压缩后的文件少，建议使用
                    algorithm: 'gzip', // 压缩算法 默认是gzip
                    test: /\.(js|css)(\?.*)?$/g, // 使用正则给匹配到的文件做压缩，这里是给css、js做压缩
                    threshold: 10240, // 只处理大于 10KB 的文件
                    minRatio: 0.8, // 只有压缩率大于0.8的文件才会被处理
                    //是否删除原有静态资源文件，即只保留压缩后的.gz文件，建议这个置为false，还保留源文件。以防：
                    // 假如出现访问.gz文件访问不到的时候，还可以访问源文件双重保障
                    deleteOriginalAssets: false
                })
            ]
        }
    },
    }