项目性能优化--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;
相关推荐
答案answer10 小时前
你不知道的Three.js性能优化和使用小技巧
前端·性能优化·three.js
relis11 小时前
AVX-512深度实现分析:从原理到LLaMA.cpp的性能优化艺术
性能优化·llama
苏打水com11 小时前
网易前端业务:内容生态与游戏场景下的「沉浸式体验」与「性能优化」实践
前端·游戏·性能优化
zhuyasen21 小时前
单机已达上限?PerfTest 分布式压测登场,轻松模拟百万用户洪峰
后端·性能优化·测试
武子康1 天前
Java-141 深入浅出 MySQL Spring事务失效的常见场景与解决方案详解(3)
java·数据库·mysql·spring·性能优化·系统架构·事务
夜月yeyue1 天前
个人写HTOS移植shell
c++·mcu·算法·性能优化·架构·mfc
夜月yeyue1 天前
ART 加速器、流水线与指令预测的关系详解
linux·服务器·c语言·单片机·嵌入式硬件·性能优化·嵌入式高阶技巧
度熊君1 天前
深入解析 Matrix FrameTracer:Android 帧率监控的实现与源码剖析
性能优化
DASXSDW1 天前
NET性能优化-使用RecyclableBuffer取代RecyclableMemoryStream
java·算法·性能优化
国科安芯1 天前
ASP3605电源芯片的性能优化与改进思路
网络·单片机·嵌入式硬件·安全·性能优化