Nginx 1.14.0部署Angular 4应用首次加载慢，求优化方案

嘿，我看了你遇到的问题——本地访问Angular应用飞快，但远程首次加载要超1分钟，后续又正常，这典型是首次加载的资源传输和缓存策略没优化到位。结合你的Nginx配置，给你几个针对性的优化方案：

首先得指出你当前配置里的一个小问题：你配置了proxy_cache相关规则，但当前location /是直接通过root服务本地静态文件，这个缓存配置其实没生效（proxy_cache是给反向代理后端服务的场景用的），先调整这块，再结合其他优化手段：

1. 启用HTTP/2提升并发加载效率 #

HTTP/2的多路复用能让浏览器同时加载多个资源而不阻塞，大幅缩短首次加载的等待时间。推荐配置HTTPS（现在主流场景都建议这么做）并启用HTTP/2：

server {
    listen 443 ssl http2;
    server_name your-domain.com;

    # 替换成你的SSL证书路径
    ssl_certificate /path/to/your/cert.pem;
    ssl_certificate_key /path/to/your/key.pem;

    # 可选的SSL安全优化
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;
}

# 把80端口请求重定向到HTTPS
server {
    listen 80;
    server_name your-domain.com;
    return 301 https://$server_name$request_uri;
}

如果暂时无法配置HTTPS，Nginx 1.14.0也支持在80端口启用HTTP/2，只需把你配置里注释的listen 80 http2;打开即可。

2. 针对Angular资源配置精准缓存策略 #

Angular生产打包后的资源会带唯一哈希值（比如main.abc123.js），这些文件内容不会变更，可以设置长期缓存；而index.html是入口文件，需要设置短缓存或强制校验，避免用户无法获取新版本：

location / {
    root /var/www/html/bluemortar;
    index index.html index.htm;
    try_files $uri $uri/ /index.html?$args;

    # 对带哈希的静态资源设置1年长期缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # 对入口index.html设置5分钟短缓存，确保能获取最新版本
    location = /index.html {
        expires 5m;
        add_header Cache-Control "public, must-revalidate";
    }
}

3. 启用Gzip/Brotli压缩减少传输体积 #

压缩静态资源能显著降低文件大小（尤其是JS、CSS这类文本资源），减少网络传输时间：

启用Gzip（Nginx默认模块支持） #

在http全局块添加：

http {
    gzip on;
    gzip_vary on;
    gzip_min_length 1024; # 只压缩大于1KB的文件
    gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
    gzip_comp_level 6; # 平衡压缩率和CPU消耗的中间值
}

启用Brotli（压缩率比Gzip更高，需Nginx编译时添加对应模块） #

如果你的Nginx支持Brotli，在http块添加：

brotli on;
brotli_vary on;
brotli_min_length 1024;
brotli_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
brotli_comp_level 6;

4. 移除无效的proxy_cache配置 #

因为你是直接服务本地静态文件，不是反向代理后端服务，所以当前的proxy_cache_path和proxy_cache my_cache;配置完全没用，可以删除这些行，避免混淆。

5. 确保Angular是生产环境打包 #

这一步非常关键！Angular开发环境打包的bundle体积极大，一定要用生产命令打包：

ng build --prod

这个命令会开启AOT编译、树摇（Tree Shaking）、代码压缩，能把bundle体积缩减到原来的几分之一。另外还可以配置Angular的懒加载模块，把大模块拆分成小chunk，首次加载只获取必要的资源。

6. 预压缩静态资源（可选，节省服务器CPU） #

提前用工具把静态文件压缩成.gz或.br格式，Nginx直接返回压缩后的文件，减少服务器实时压缩的CPU消耗：
比如用gzip预压缩：

gzip -k6 /var/www/html/bluemortar/*.js
gzip -k6 /var/www/html/bluemortar/*.css

然后在Nginx配置里添加：

location ~* \.js$ {
    if (-f $request_filename.gz) {
        rewrite ^(.*)$ $1.gz break;
    }
    expires 1y;
    add_header Cache-Control "public, immutable";
}

location ~* \.gz$ {
    add_header Content-Encoding gzip;
    types {
        application/javascript gzip;
        text/css gzip;
    }
}

这些优化组合起来，应该能大幅降低远程客户端的首次加载时间。

内容的提问来源于stack exchange，提问作者Wael Abdeen