基于User-Agent的Nginx Polymer包分发配置失效，求替代方案

看起来你的NGINX配置没达到预期效果，我先帮你排查下可能的问题，再分享几个靠谱的解决方案：

现有配置的潜在问题 #

1. User-Agent匹配不准确：你把所有Edge都归到了es5分组，但现在绝大多数Edge是Chromium内核，完全支持ES6，这个规则会错误地给现代Edge分发ES5包，可能让你误以为配置不生效；
2. 后端路径验证：要确认http://my_appname服务下确实存在/es5和/es6路径，并且能正确返回对应的Polymer包——如果后端路径不对，NGINX代理过去自然拿不到正确的资源。

修正后的NGINX代理配置 #

先调整UA匹配逻辑，精准定位真正需要ES5的浏览器（主要是IE和旧版EdgeHTML内核的Edge），再优化代理配置：

# 精准匹配需要ES5的浏览器
map $http_user_agent $polymer_version {
    # 匹配IE 10-11、Trident内核的IE兼容模式，以及旧版Edge（EdgeHTML内核，版本<=24）
    ~*MSIE\s|Trident\/|Edge\/(1[0-4]|2[0-4]) es5;
    # 其他所有浏览器默认分发ES6包
    default es6;
}

location /cdn {
    # 把请求代理到后端对应版本的路径
    proxy_pass http://my_appname/$polymer_version;
    # 可选：传递原始UA给后端，方便后端调试日志
    proxy_set_header User-Agent $http_user_agent;
    # 可选：设置合理的缓存策略，提升加载速度
    proxy_cache_valid 200 1d;
}

其他可行方案 #

如果代理方式还是有问题，试试下面两种思路：

方案1：NGINX本地托管静态包 #

如果Polymer包直接存在NGINX服务器上，不需要代理到后端，用root直接映射更简单：

map $http_user_agent $polymer_version {
    ~*MSIE\s|Trident\/|Edge\/(1[0-4]|2[0-4]) es5;
    default es6;
}

location /cdn {
    # 假设你的ES5包存在 /var/www/polymer/es5，ES6包在 /var/www/polymer/es6
    root /var/www/polymer/$polymer_version;
    # 确保静态文件的MIME类型正确（NGINX默认可能已经配置，但可以手动补充）
    types {
        application/javascript js;
        text/html html;
        application/json json;
    }
    # 启用浏览器缓存
    expires 1d;
}

方案2：前端动态检测加载 #

如果NGINX配置调整受限，也可以把UA检测逻辑放到前端，动态加载对应版本的包：

// 判断是否需要加载ES5版本的Polymer
function shouldLoadES5() {
    const ua = navigator.userAgent;
    // 匹配IE、旧版Edge
    return /MSIE\s|Trident\/|Edge\/(1[0-4]|2[0-4])/.test(ua);
}

// 动态创建script标签加载对应包
const script = document.createElement('script');
script.src = shouldLoadES5() ? '/cdn/polymer-es5.js' : '/cdn/polymer-es6.js';
script.async = true;
document.head.appendChild(script);

这种方式兼容性更强，即使服务器配置出问题，前端也能自己处理分发逻辑。

内容的提问来源于stack exchange，提问作者Junaid Akhtar