如何在script标签中加载Nexus托管的压缩JS文件？

核心思路 #

不要直接在script标签里请求.gz或.br后缀的文件，而是让浏览器和Nexus通过请求头协商内容编码，自动返回压缩后的资源，同时保证MIME类型正确。

具体解决步骤 #

1. 配置Nexus启用内容编码协商 #

• 把umd.min.js、umd.min.js.gz、umd.min.js.br三个文件上传到Nexus仓库的同一目录下
• 在Nexus中配置内容编码映射：允许Nexus识别.js文件对应的.gz和.br压缩版本，确保返回正确的Content-Type: application/javascript头，同时根据请求的Accept-Encoding头自动添加Content-Encoding: gzip或Content-Encoding: br
• 若必须保留X-Content-Type-Options: nosniff头，需确保Nexus返回的MIME类型严格为application/javascript

2. 正确的script标签写法 #

只需要请求原始的.js文件，浏览器会自动发送Accept-Encoding: gzip, deflate, br请求头，Nexus会返回对应的压缩资源：

<script src="https://{linktoNexusRepo}/someFile.umd.min.js"></script>

3. 针对现有问题的逐一修复 #

• 问题1：MIME类型不匹配拦截
  直接请求.gz/.br文件时，Nexus会返回它们的原生MIME类型（如application/gzip），不符合浏览器期望的application/javascript，因此被nosniff规则拦截。用协商编码的方式，Nexus会返回正确的MIME类型，同时带上编码头，规避拦截。

• 问题2：请求200但无数据传输
  浏览器拿到压缩文件后，若没有收到Content-Encoding头，不会自动解压，导致解析为空。通过协商编码，Nexus会正确设置该头，浏览器会自动解压并执行JS。

• 问题3：JS文件未压缩
  确保Nexus开启内容编码协商且已上传对应压缩文件，当浏览器发送Accept-Encoding头时，Nexus会自动返回压缩版本并设置Content-Encoding头。

备用方案（Nexus无法配置编码协商时） #

用反向代理（如Nginx）中转请求：

• 配置Nginx监听Nexus的资源路径
• 当请求.js文件时，检查是否存在对应的.gz/.br文件，根据Accept-Encoding返回压缩版，并手动设置正确的Content-Type和Content-Encoding头

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