现在的程序使用单页面应用,因此程序会在一开始就会加载页面JS。如果带宽不够,那么会影响页面下载速度。

我们可以使用NGINX 进行压缩,加快文件下载。

gzip  on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.0;
gzip_comp_level 3;
gzip_types text/plain application/javascript application/css text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";
gzip_comp_level 是压缩等级,可以使用 1-9 ,值越大,压缩比越高,但是对CPU的消耗也就越高。

实际测试:
未开启压缩的情况:

开启压缩的情况

可以看到压缩比达到了 3倍,如果改为 9 的话,最大的文件会压缩到 1.6M.

使用nginx 压缩的更多相关文章

  1. Nginx - 压缩模块

    1. 前言 在 Nginx 中与网页压缩相关的模块有两个:一个是 HttpGzipModule,另一个是 HttpGzipStaticModule.前者用于启用在文件传输过程中使用 gzip 压缩,而 ...

  2. 使用Nginx压缩文件、设置反向代理缓存提高响应速度

    Gzip压缩: 最开始,这个竟然要6m多(大到不寻常),响应的速度3分多钟. 所以先对返回的文件进行gzip压缩.判断返回的资源是否有使用gzip压缩,观察响应头部里面,如果没有 Content-En ...

  3. nginx压缩,缓存

    https://www.darrenfang.com/2015/01/setting-up-http-cache-and-gzip-with-nginx/ https://www.linuxdashe ...

  4. Nginx -- Gzip 压缩功能作用

    1.对应的压缩参数说明# 开启gzip压缩功能gzip on; # 设置允许压缩的页面最小字节数,页面字节数从header头的Content-Length中获取.默认值是0,不管页面多大都进行压缩,建 ...

  5. Nginx反向代理、负载均衡、动静分离、缓存、压缩、防盗链、跨域访问

    一.反向代理 1.在192.168.189.130机器启动tomcat服务,http://192.168.189.130:8080/ 访问服务正常 2.在192.168.189.131机器配置ngin ...

  6. Nginx GZIP 压缩

    [ HTTP 开启gzip ] gzip on; // 开启 nginx在线实时压缩数据流: gzip_min_length 1k; // 允许压缩的页面最小字节 gzip_buffers 32k; ...

  7. 在windows、linux中开启nginx的Gzip压缩大大提高页面、图片加载速度<转>

    为了降低tomcat服务的压力,把页面上的图片采用windows版的nginx进行加载,由于有些图片比较大,加载特别的慢,所以在nginx中打开了gzip的压缩功能.加载图片的速度快了很多. 通过站长 ...

  8. Nginx启用Gzip压缩js无效的原因

    Nginx启用gzip很简单,只需要设置一下配置文件即可完成,可以参考文章Nginx如何配置Gzip压缩功能.不过,在群里常有人提到,他们的网站Gzip压缩虽然成功了,但检测到JS仍然没有压缩成功,这 ...

  9. Nginx 高级配置-压缩功能

    Nginx 高级配置-压缩功能 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Nginx压缩相关参数概述 1>.gzip on | off; Nginx支持对指定类型的文 ...

  10. nginx的压缩、https加密实现、rewrite、常见盗链配置

    Nginx 压缩功能 ngx_http_gzip_module #ngx_http_gzip_module 用gzip方法压缩响应数据,节约带宽 #启用或禁用gzip压缩,默认关闭 gzip on | ...

随机推荐

  1. TypeScript – Decorator 装饰器

    前言 TypeScript 5.0 之后就可以使用正真的 JS Decorator 了, 从前 experiment 的版本依然可用, 但是不建议继续用, 因为差很远, 一起用会混乱. Decorat ...

  2. CSS – Icon

    前言 Icon 并不容易搞. 市场有许多平台支持 Icon, 有些收费有些免费. 有些 icon 很丰富, 有些很缺失. 尤其是在做网站的时候寻找 icon 是一个挺累的事情. 这篇就来聊聊 icon ...

  3. angular cli, vs code liveserver, vs 2019 iis express 10, vs code kestrel 使用 https + ip

    更新: 2022-03-20 修订版: Vs Code, Visual Studio 2022, Angular and Live Server Running Through Https and I ...

  4. C++ STL map/multimap容器

    map/multimap容器 Map的特性是,所有元素都会根据元素的键值自动排序.Map所有的元素都是pair,同时拥有实值和键值,pair的第一个元素被视为键值,第二个元素被视为实值,map不允许两 ...

  5. [Tkey] CodeForces 1267G Game Relics

    太神了这题,膜拜出题人 orz. 思考一 首先是大家都提到的一点,先抽卡再买.这里来做个数学分析. 假设我们还剩 \(k\) 种没有买,其实我们是有式子来算出它的花费期望的.WIKI 上提到,假设一个 ...

  6. crypt.h:No such file or directory 报错处理

    crypt.h:No such file or directory 报错处理 前言:本文初编辑于2024年9月28日 CSDN主页:https://blog.csdn.net/rvdgdsva 博客园 ...

  7. 【赵渝强老师】Oracle的PGA与数据库连接建立的过程

    首先,我们来了解一下Oracle的内存结构,如下: 关于Oracle的内存结构,详情请查看:[赵强老师]Oracle数据库的内存结构 (一)PGA的组成结构 PGA主要由以下三部分组成: 私有SQL区 ...

  8. Java实现随机抽奖的方法有哪些

    在Java中实现随机抽奖的方法,通常我们会使用java.util.Random类来生成随机数,然后基于这些随机数来选择中奖者.以下将给出几种常见的随机抽奖实现方式,包括从数组中抽取.从列表中抽取以及基 ...

  9. 《Vue.js 设计与实现》读书笔记(1-3章)

    第 1 章.权衡的艺术 命令式 or 声明式 命令式:关注过程 声明式:关注结果 声明式直接声明想要的结果,框架帮用户封装好命令式的代码,所以在封装的过程中要做一些其他的事情来(生成要做的事情/找出差 ...

  10. 使用ftrace查找Kernel启动阶段的延时原因

    查找Kernel启动阶段的延时原因 1.确保内核配置了如下选项 CONFIG_FTRACE: "Tracers" CONFIG_FUNCTION_TRACER: "Ker ...