compression-webpack-plugin插件的使用方式
原理:
前端打包的时候,将资源文件压缩,并上传,后台使用nginx配置可读gz文件
前端配置:
vue.config.js
const CompressionPlugin = require('compression-webpack-plugin');//引入gzip压缩插件module.exports = {... 其他配置
configureWebpack: config => {
// 此处可以添加对开发环境以及生产环境的配置
configureWebpack: config => {
// 开发环境不配置 // 生产环境才去配置
return {
plugins: [
new CompressionPlugin({
//此插件不能使用太高的版本，否则报错：TypeError: Cannot read property 'tapPromise' of undefined
// filename: "[path][base].gz", // 这种方式是默认的，多个文件压缩就有多个.gz文件，建议使用下方的写法
filename: '[path].gz[query]', // 使得多个.gz文件合并成一个文件，这种方式压缩后的文件少，建议使用
algorithm: 'gzip', // 官方默认压缩算法也是gzip
test: /\.js$|\.css$|\.html$|\.ttf$|\.eot$|\.woff$/, // 使用正则给匹配到的文件做压缩，这里是给html、css、js以及字体（.ttf和.woff和.eot）做压缩
threshold: 10240, //以字节为单位压缩超过此大小的文件，使用默认值10240吧 minRatio: 0.8, // 最小压缩比率，官方默认0.8
//是否删除原有静态资源文件，即只保留压缩后的.gz文件，建议这个置为false，还保留源文件。以防：
// 假如出现访问.gz文件访问不到的时候，还可以访问源文件双重保障
deleteOriginalAssets: false }) ]
}},
}
nginx配置修改
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 4k; # 小于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-E
也可以使用预加载的方式去实现,但是效果不是很明显
以下的是预加载preload-webpack-plugin插件的改良,但是可能会出现cb is not function类似的错误出现,所以需要自己去写,该插件的底层原理就是获取标签,如何去循环插入.
window.onload = function() {
setTimeout(function() {
// reference to <head>
var head = document.getElementsByTagName('head')[0]; // 获取head元素
// a new CSS
// var css = document.createElement('link');
// 创建一个link 元素
// css.type = "text/javascript";
// css.rel = "prefetch";
// css.href = "http://domain.tld/preload.css";
// a new JS
var jsArr = document.getElementsByTagName('script')
jsArr.forEach((it)=>{
var js = document.createElement("script");
js.src = it.src
js.rel = "preload"
js.type = "text/javascript"
head.appendChild(js)
}) }, 1000); };
