现在的程序使用单页面应用,因此程序会在一开始就会加载页面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. Angular 18+ 高级教程 – Component 组件 の Control Flow

    前言 Control Flow 是 Angular v17 版本后推出的新模板语法,用来取代 NgIf.NgForOf.NgSwitch 这 3 个 Structure Directive. Stru ...

  2. storybook 7.6

    https://storybook.js.org/tutorials/intro-to-storybook/vue/zh-CN/get-started/ 开始吧 注释:degit 从 github 拉 ...

  3. QT6 QML编程

    QT6 QML编程 使用AI技术辅助生成 QT界面美化视频课程 QT性能优化视频课程 QT原理与源码分析视频课程 QT QML C++扩展开发视频课程 免费QT视频课程 您可以看免费1000+个QT技 ...

  4. About CSP

    好了,猜猜今年第一题会考什么 linux 终端指令 这样吧 CTH 装了 ubuntu 系统的电脑被人施加了 rm -rf /home/Desktop/ 指令,导致他打不开桌面了,以下哪一个是 CTH ...

  5. Git常用命令,分支合并与管理

    Git 自我感觉最大的优点是对版本库和分支的管理 各自的电脑都对项目保存一份版本,分支合并也极其方便. 而且Git的目录操作命令跟Linux一样,使用起来还是非常顺手的. Git详解 Git 常用命令 ...

  6. 【赵渝强老师】第一个Oracle的手工备份和恢复

    一.什么是手工管理的备份与恢复? 尽管在Oracle中,已经有了RMAN的备份与恢复.但是作为Oracle备份恢复的一种方式,我们将在本文中通过一个例子来为大家介绍如何使用手工的方式来完成Oracle ...

  7. Vue 项目优化解决方案 有哪些 ?

    1. 打包的时候 , 通过插件把css代码单独抽离出来使用 link 引入 2. 打包的时候 , 通过webpack内置插件optimization  把 公共的js代码抽离出来 ps:打包之后,代码 ...

  8. Python之py9-录音自动下载

    #!/usr/bin/env python # -*- coding:utf-8 -*- import os import re import pandas as pd import numpy as ...

  9. 查找大量时序遥感文件缺失、不连贯的成像日期:Python代码

      本文介绍批量下载大量多时相的遥感影像文件后,基于Python语言与每一景遥感影像文件的文件名,对这些已下载的影像文件加以缺失情况的核对,并自动统计.列出未下载影像所对应的时相的方法.   批量下载 ...

  10. MP4 转 TXT 项目与 M3U8 下载脚本

    项目背景 在当今信息社会,视频学习已成为一种重要的知识获取方式.然而,许多用户在观看视频的过程中,效率往往低于预期.为了提升学习效率,我们决定开发一个将 MP4 视频转换为 TXT 文稿的项目.此外, ...