Nginx优化静态文件加载

简介：nginx压缩静态文件优化加载速度，nginx开启http缓存优化静态文件加载速度

Nginx优化静态文件加载主要针对图片、js、css及html文件，优化方案主要分为 HTTP缓存 和 文件压缩。

HTTP缓存是指客户端通过HTTP返回的头部信息判断是否缓存。缓存方式为客户端本地存储。

文件压缩是指服务器将静态文件通过gzip打包压缩后再返回给客户端，客户端再通过HTTP返回的头部信息进行解压，之后再进行解析渲染

http缓存：主要通过在http返回的头部添加 Cache-Control 和 Expires 来实现

Cache-Control：控制是否缓存

Expires：控制缓存时间

静态文件中图片一般不做gzip压缩，大部分图片都是经过压缩，gzip再进行压缩效果不大。对于js、css、html及字体文件而言，gzip压缩效果非常明显。

下面我们来看看Nginx中图片优化的具体配置：

expires off | time;

配置范围：http、server、location、if in location

例如：

1. 开启缓存，过期时间24小时：expires 24h;

2. 关闭缓存(默认是关闭状态)：expires off;

对于js、css及html除了http缓存优化外还可以使用压缩方式返回。

例如：一个index.css文件大小为100KB，经过gzip压缩后可能就只有十几KB。

nginx中是如何开启压缩功能呢？下面我们直接来看看配置代码：

# 开启gzip压缩
gzip on | off;

#设置压缩级别（默认为1）
gzip_comp_level level;

上述配置范围：http，server，location

部分浏览器可能不支持gzip压缩问题，大家可以开启gunzip 配置如下

http_gunzip_module on | offf;

现在我们已经知道优化配置选项，在实际工作中我们可能需要针对不同域名进行优化，区别图片和其他静态文件进行优化。这些究竟怎么去实现呢？下面我们就来看看完整的配置：

server {
    listen    80;
    server_name test.cn;

    root /data/www/test;

    location ~ .*\.(html|js|css|woff){
        access_log off;
        expires 168h;
        gzip on;
        gzip_comp_level 5;
        gzip_types text/plain application/javascript text/css font/woff;
    }

    location ~ .*\.(png|jpg|jpeg|gif){
        access_log off;
        valid_referers *.test.cn servicewechat.com none;
        if ($invalid_referer) {
           return 403;
        }
        expires 168h;
    }

    location / {
        index  index.html index.htm;
    }
    location ~ /api {
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://127.0.0.1:9502;
    }
}

在上述nginx配置中，我们会发现所有静态文件的访问关闭了访问日志【access_log off;】。

图片简单的做了防盗链功能，其中servicewechat.com是微信小程序的域名，这样小程序中也可以访问图片资源。

js、css、html及字体文件做了压缩功能，减少服务器带宽压力，加快用户访问速度。

上述配置中，nginx转发php-fpm的配置中忽略了很多配置信息，这里建议大家在location ~ /api 中加载 fastcgi_params文件。fastcgi_params是Nginx官方提供的文件，大家可以放心使用。

有遗漏或者不对的可以在我的公众号留言哦