一、前言
最近在做我的项目的过程中，发现随着我的项目越来越大。编译之后的包也越来越大。
能够发现，足足有35M
之后，进入static下的js文件夹。
发现有两个文件，一个4M，一个13M，比其余的都大。
于是便在网上搜寻各种晋升页面及接口响应速度快的方法。无奈的是，网上大多都是从他人那里复制粘贴的帖子。最初也只能本人入手搞。
二、compression-webpack-plugin
言归正传。通过查问，发现前端有个库。compression-webpack-plugin
引入形式也很简略
yarn add compression-webpack-plugin --D须要留神compression-webpack-plugin得和你我的项目中的webpack匹配，否则会呈现问题。
个别对应图是
compression-webpack-plugin是8.x， 则webpack须要5.xcompression-webpack-plugin是7.x， 则webpack须要5.xcompression-webpack-plugin是6.x， 则webpack须要4.x或者5.xcompression-webpack-plugin是5.x， 则webpack须要4.x或者5.x比方你我的项目中的webpack是4.x的，那么compression-webpack-plugin只能用5和6的。不能用7和8版本的。
以vue-cli3.x为例。
const CompressionPlugin = require("compression-webpack-plugin");...其余代码configureWebpack:{ plugins:[ new CompressionWebpackPlugin({ test: /\.(js|css)?$/i, // 哪些文件要压缩 filename: "[path][base].gz", // 压缩后的文件名 algorithm: "gzip", // 应用gzip压缩 threshold: 10240, //大于 10240字节，既10k时 minRatio: 0.8, //压缩率 deleteOriginalAssets: true, //是否删除本来的js }); ]}...其余代码先来解释下CompressionWebpackPlugin选项中的几个参数的含意。
1、test：是个正则表达式，示意哪些文件须要压缩。这里咱们抉择以.js和.css结尾的文件。这样的话上面的文件都在范畴内。
2、filename：示意压缩之后的文件名，后缀必须为.gz(是gzip的文件格式)，path和base示意，会在压缩时，把源文件的名称和门路都携带上。比方
index.9b65b390.js //须要压缩的源文件index.9b65b390.js.gz //压缩之后的文件。3、algorithm：压缩形式。
个别能够抉择gzip和brotliCompress两种，brotliCompress稍后会说到。
4、threshold：压缩阈值
示意文件的大小超过定义的字节，就会压缩
threshold: 10240示意，超过10240个字节，也就是超过10k是压缩。
5、minRatio这个没试出来怎么个用法，前面补充。
6、deleteOriginalAssets：示意是否删除源文件。
网上百分之90全写的false。
那么咱们如果有两个文件
index.9b65b390.js index.9b65b390.js.gz 如果deleteOriginalAssets:true,最初只残余index.9b65b390.js.gz
成果是这样的
最初查看dist，曾经从原来的37M，降到了19M
而如果deleteOriginalAssets为false，那么最终的源文件和gz文件都在。
最初查看dist，发现比我没压缩前的37M都大。达到了41M
那我图啥呢？图37M不够大吗？
所以如果咱们想要让dist变小，那就必须选deleteOriginalAssets为true。
然而留神一点，在development模式下，这个要false，不然浏览器会报错，空白页面。
二、nginx
前端打包好gz后，还须要后端进行配置，以nginx为例。
只须要加一行代码即可。
有的敌人会说。"gzip true"也能够呀。
没错，gzip true的确能够。像这样
然而gzip是动静压缩，比方你的接口返回大量数据或者返回动态的大js文件。服务器会杜绝你gzip_min_length的配置，去实时压缩，而后给你返回。在这个过程中，服务器是要耗费性能和资源的。你压缩的越小。服务器解决的越慢，相应的你http会期待更长。
而gzip_static是指，间接从服务器下来找.gz的文件。如果有间接返回。没有就退而求其次找源文件。这个过程，服务器响应是很疾速的。
你也能够都配置上。gzip_static优先于gzip
location / { root html; index index.html; gzip_static on; }gzip on;gzip_min_length 10k;gzip_comp_level 1;gzip_types text/plain application/json application/javascript text/css;gzip_vary on;
关上浏览器咱们能够看到content-encoding为gzip，文件大小为4.2M，比咱们刚开始没压缩的13M小了太多了。
最初，gz的文件返回后，不须要显式的解决，浏览器会主动解压。
查看浏览器咱们发现，Accept-Encoding定义的浏览器能够承受的压缩格局为gzip, deflate, br三种。而服务器返回给咱们的格局是 Content-Encoding:gzip，这OK，浏览器能够解决。
你鼠标放到4.2M这个地位上，会有个相似于title的货色，提醒只有4.2M是通过网络传输的。然而实际上源文件有13.9M。
三、Brotli
方才在CompressionWebpackPlugin中说algorithm时，除了gzip，还有个压缩形式，那就是brotli。
它是一种更加高效的压缩形式。而且各大浏览器根本都反对，然而也严格，须要https才能够，http中不反对Brotli，
上面是vue的配置
const CompressionPlugin = require("compression-webpack-plugin");const zlib = require("zlib");...其余代码configureWebpack:{ plugins:[ new CompressionWebpackPlugin({ test: /\.(js|css)?$/i, filename: "[path][base].br", algorithm: "brotliCompress", threshold: 10240, minRatio: 0.8, deleteOriginalAssets: true, //是否删除本来的js compressionOptions: { params: { [zlib.constants.BROTLI_PARAM_QUALITY]: 11, }, }, }); ]}...其余代码压缩后，咱们发现，比方才gzip压缩的更小
整个dist的大小，从gzip的19M，放大到了16M
而后设置nginx的配置。
location / { root html; index index.html; brotli_static on; }brotli on; brotli_comp_level 6;brotli_buffers 16 8k;brotli_min_length 20;brotli_types *; 留神下nginx默认没有brotli模块，须要装置，编译下（后端晓得怎么弄，前端不必关怀）
而后关上浏览器咱们会看到