1. 概述

1.1 背景

静态资源过大，下载耗时导致页面翻开慢，希望通过紧缩减小文件巨细，提升下载速度。

1.2 紧缩方法

Nginx紧缩支持两种方法，静态紧缩和动态紧缩。

● 静态紧缩

是先把js、css等文件紧缩为.gz文件，客户端拜访时会主动下载.gz文件，并在客户端主动解压后拜访。

● 动态紧缩

客户端建议恳求时，nginx动态将js、css文件紧缩后回来给客户端，客户端收到后主动解压并拜访。

2. 完成

Nginx版本：1.24.0

2.1 静态紧缩

我们以Vue3为例子来说明整个完成进程。

2.1.1 紧缩Vue3资源文件

● 安装紧缩插件

npm install vite-plugin-compression

● 插件装备

vite.config.ts/js 中导入vite-plugin-compression插件和装备

import vue from '@vitejs/plugin-vue'
import viteCompression from 'vite-plugin-compression'
export default {
  plugins: [
    vue(), 
	// 下面是紧缩插件装备
    viteCompression({
      filter: /.(js|css|json|txt|ico|svg)(?.*)?$/i, // 需求紧缩的文件
      threshold: 1024, // 文件容量大于这个值进行紧缩
      algorithm: 'gzip', // 紧缩方法
      ext: 'gz', // 后缀名
      deleteOriginFile: true, // 紧缩后是否删除紧缩源文件，false不删除
    })
  ], 
  // 其他装备省略
}

注意不要紧缩*.html文件，不然拜访时会报403错误，即使添加如下装备也会报错：

● 打包

npm run build

输出文件后，部署到nginx的静态资源文件目录：

2.1.2 Nginx装备

● 启用静态紧缩功用

在http块或server块添加如下装备则可：

    gzip_static on; # 只需求加这一个装备

● 装备静态资源目录

紧缩后的文件部署到自定义目录下：

	location / {
       root   /site/static;
       index  index.html index.htm;
    }

2.2 动态紧缩

在http块或server块添加如下装备则可：

    # 敞开动态紧缩功用
	gzip on;
	# 紧缩等级
	gzip_comp_level 6;
	# 哪些类型的文件需求紧缩
	gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

3. 验证

3.1 紧缩和未紧缩功能对比

3.1.1 本机测验

如下是一个紧缩和不紧缩对比的例子：

能够看到，紧缩后的传输数据变小了，可是加载时刻并没有减少，说明紧缩/解紧缩也需求时刻，至于哪种方法更快，取决于网络耗时和紧缩耗时的具体巨细。

3.1.2 公网测验

紧缩前：

紧缩后：

能够看到在紧缩后体积减小，加载时刻也变短了。

3.2 辨认静态紧缩和动态紧缩

● 静态紧缩

● 动态紧缩

4. 总结

● 紧缩后未必一定能提升页面翻开速度，需求比较网络耗时和紧缩耗时时刻，哪个更省时。

● 动态紧缩会消耗nginx的处理功能，如果能静态紧缩，能够优先考虑运用静态紧缩。（能够参阅自行实测结果）

● 动态紧缩和静态紧缩能够一起运用，有静态紧缩文件就运用，没有则动态紧缩。

其他阅览：

怎么编写软件设计文档
Spring Cache架构、机制及运用
布隆过滤器适配Spring Cache及问题与处理战略
JAVA编程思维（一）通过依赖注入添加扩展性
JAVA编程思维（二）怎么面向接口编程
JAVA编程思维（三）去掉别扭的if，自注册战略形式优雅满意开闭原则
Java编程思维（七）运用组合和承继的场景
JAVA根底（一）简单、透彻理解内部类和静态内部类
JAVA根底（二）内存优化-运用Java引用做缓存
JAVA根底（三）ClassLoader完成热加载
JAVA根底（五）函数式接口-复用，解耦之利刃