移动端 JS 文件过大？用 Brotli 压缩减少传输体积
移动端网络环境不稳定，通过开启 Brotli 压缩可以显著减少 JS 文件的传输体积，从而加快页面加载速度。
检查服务器是否支持 Brotli 压缩
在移动端测试页面加载速度时，如果发现 JS 文件体积过大，首先需要确认服务器是否正确配置了 Brotli 压缩。Brotli 是一种比 Gzip 更高效的压缩算法，特别适合文本类资源。可以通过浏览器开发者工具的 Network 面板查看响应头，确认是否存在 Content-Encoding: br 字段。如果未看到该字段，说明服务器可能未启用 Brotli，或者客户端未发送支持该算法的请求。对于 Apache 服务器，需要安装并配置 mod_brotli 模块；对于 Nginx，则需要启用 ngx_http_brotli_filter_module。确保服务器配置正确后，才能进行下一步验证。
除了检查响应头，还可以通过简单的 HTTP 请求测试。使用 curl 命令或 Postman 发送请求到目标 JS 文件，观察返回的 Content-Encoding 头。如果服务器返回 br，说明 Brotli 压缩已生效。需要注意的是，Brotli 的支持依赖于客户端的浏览器版本，现代浏览器（如 Chrome、Firefox、Safari）均支持该算法。如果客户端不支持，服务器通常会回退到 Gzip 或不压缩。因此，在移动端测试时，应确保使用的是较新的浏览器版本，以避免因客户端不支持而导致压缩未生效。
验证压缩效果与传输时间
确认服务器支持 Brotli 压缩后，下一步是验证其对传输时间和文件体积的实际影响。在移动端网络环境下，使用浏览器开发者工具的 Network 面板，对比压缩前后的文件大小和加载时间。压缩后的文件体积通常会显著减小，尤其是对于包含大量文本的 JS 文件，压缩率可能达到 20% 到 30%。同时，传输时间的减少也会更加明显，尤其是在弱网环境下。如果压缩后的文件体积变小且加载时间缩短，说明 Brotli 压缩已成功优化了移动端加载性能。
为了更准确地评估压缩效果，可以在不同的网络条件下进行测试。例如，在 4G、3G 或 Wi-Fi 环境下分别加载页面，观察压缩对加载时间的影响。如果压缩效果不明显，可能是由于 JS 文件本身已经过压缩（如 Webpack 打包后的文件），或者文件中包含大量二进制数据（如 Base64 编码的图片）。在这种情况下，Brotli 压缩的收益会相对较低。因此，在优化时，应优先压缩纯文本资源，如 HTML、CSS 和 JS 文件，以获得最大的性能提升。
避免对已压缩资源重复压缩
在启用 Brotli 压缩时，必须注意避免对已经压缩过的资源进行二次压缩。MDN 文档指出，压缩算法通常对特定类型的文件效果更好，而对已经压缩过的文件（如图片、音频和视频）可能不仅没有帮助，反而会增加文件大小。这是因为压缩算法需要维护一个字典，其开销可能超过压缩带来的额外收益。因此，在配置服务器时，应明确指定哪些文件类型需要压缩。例如，对于 .js、.css 和 .html 文件，可以启用 Brotli 压缩；而对于 .jpg、.png 和 .mp4 文件，则应避免压缩。
此外，服务器配置中还应考虑缓存策略。由于 Brotli 压缩会生成不同的资源表示形式，服务器必须在响应头中包含 Vary: Accept-Encoding 字段，以便缓存服务器能够正确缓存压缩后的资源。如果未设置该字段，可能会导致缓存服务器混淆，从而降低压缩效果。因此，在优化移动端性能时，不仅要启用 Brotli 压缩，还要确保服务器配置正确，避免对已压缩资源重复压缩，并合理设置缓存策略，以最大化压缩带来的性能提升。
排查压缩未生效的原因
如果在测试中发现 Brotli 压缩未生效，需要按照以下顺序排查原因。首先，检查客户端是否发送了支持 Brotli 的请求。浏览器默认会发送 Accept-Encoding: br, gzip, deflate 请求头，但如果客户端不支持或被禁用，服务器将无法使用 Brotli。其次，检查服务器配置是否正确。对于 Apache，确保 mod_brotli 模块已启用；对于 Nginx，确保 ngx_http_brotli_filter_module 已加载。如果配置正确但压缩仍未生效，可能是由于服务器优先使用了 Gzip 或其他压缩算法。
最后，检查文件类型和内容。如果 JS 文件中包含大量二进制数据（如加密或编码后的内容），Brotli 压缩的效果会大打折扣。此外，如果服务器配置了多个压缩模块（如同时启用 Gzip 和 Brotli），可能会导致冲突。在这种情况下，建议禁用 Gzip，仅保留 Brotli，以避免重复压缩和性能下降。通过以上步骤，可以快速定位并解决 Brotli 压缩未生效的问题，确保移动端页面加载性能得到优化。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。