如何从 AWS CloudFront 和 S3 请求 gzip javascript 文件

Question

我希望通过压缩来优化我网站的包大小。 对于初学者，我使用 webpack 和 compression-webpack-plugin 从我编译的 javascript 创建一个 gizp 文件。我的所有资产都托管在 S3 上并通过 CloudFront 提供。 这种优化也是新手。

new CompressionPlugin({
 test: /\.js(\?.*)?$/i,
 filename: "[path].gz[query]",
 algorithm: "gzip",
})

我的 s3 桶。 看起来像这样

bucket /
 index.html
 main-92540b8c5cf0e7107a73.js.gz

上面的 js.gz 文件具有“内容编码：gzip”元数据字段集。 总大小为 86.0 KB

S3 CORS配置

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
    <AllowedHeader>Content-Length</AllowedHeader>
</CORSRule>
</CORSConfiguration>

index.html 正在寻找这个

<script type="text/javascript" src="/main-92540b8c5cf0e7107a73.js"></script>

我的 CloudFront 发行版将“自动压缩对象”设置为 true。 尽管我确信这是必要的，因为我的文件已经被压缩了。

完成所有这些设置后，我在我的 js.file 控制台中看到了这个错误

Uncaught SyntaxError: Unexpected token '<'

如果我检查我的请求和响应标头，它们看起来像

我相信我面临的问题是我的请求中没有设置 Accept-Encoding: gzip header 。 但我不清楚我应该如何添加它。

我的问题是，我对丢失的 header 是否正确？ 或者还有什么我错过的吗？

Answer 1

能够通过删除压缩文件上的 .gz 扩展名来解决此问题。 还在我的 s3 存储桶 cors 配置中添加了内容长度 header