项目性能优化--gzip

1.项目放到服务器上访问,查看js请求,加载的是js文件;

优化-生成gzip包并优先匹配gzip资源

第一种方式:纯nginx服务器配置

1.nginx配置

复制代码
# 开启
gzip on;

# 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
gzip_min_length 1k;

# gzip 压缩级别,1-9,数字越大压缩的越好,也越占用CPU时间
gzip_comp_level 1;

# 进行压缩的文件类型。javascript有多种形式。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;

# 是否在http header中添加Vary: Accept-Encoding,建议开启
gzip_vary on;

# 禁用IE 6 gzip
gzip_disable "MSIE [1-6]\.";

# http版本,不填不生效
gzip_http_version 1.0;

2.请求,发现请求的是gzip

第二种方式:前端生成gzip

使用compression-webpack-plugin插件 https://www.npmjs.com/package/compression-webpack-plugin

1.vue.config.js中配置

复制代码
const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']

module.exports = {
  configureWebpack: {
    plugins: [
      // 启用gzip
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8,
        deleteOriginalAssets: false // 是否删除源文件
      }),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5, 
        minChunkSize: 100
      })
    ]
  }
}

deleteOriginalAssets为true时,会删除js文件,访问时会报404

2.build后产生gzip文件

3.需要服务端配置

复制代码
// 会优先查找静态gzip资源
gzip_static on;
相关推荐
月夜奇术师2 小时前
SQL查询性能优化:从30分钟到30秒的蜕变——破解串行查询瓶颈
数据库·性能优化
小二·3 小时前
仓颉源码剖析:ArrayList动态数组的实现艺术与性能优化
性能优化
DemonAvenger4 小时前
Redis分布式锁:实现原理深度解析与实战案例分析
数据库·redis·性能优化
那我掉的头发算什么5 小时前
【数据库】增删改查 高阶(超级详细)保姆级教学
java·数据库·数据仓库·sql·mysql·性能优化·数据库架构
JMzz5 小时前
Rust 中的内存对齐与缓存友好设计:性能优化的隐秘战场 ⚡
java·后端·spring·缓存·性能优化·rust
国科安芯11 小时前
基于ASM1042通信接口芯片的两轮车充电机性能优化研究
服务器·网络·人工智能·单片机·嵌入式硬件·性能优化
芝麻开门-新起点11 小时前
Flutter 网络通信协议:从原理到实战,选对协议让 APP 飞起来
flutter·ui·性能优化
yangchanghua11120 小时前
[记录]一个30秒的sql,我是怎么把它改到0.5秒的
数据库·sql·性能优化
A达峰绮1 天前
Actix-web 框架性能优化技巧深度解析
前端·性能优化·actix-web
回家路上绕了弯1 天前
慢查询优化全攻略:从定位根源到落地见效的实战指南
后端·性能优化