如何向AWS CloudFront和S3申请gzip javascript文件？

Question

我希望通过压缩优化我的网站的捆绑包大小。作为初学者，我使用了webpack和压缩工具-webpack-plugin，从我编译好的javascript中创建一个gizp文件。我的所有资产都托管在S3上，并通过CloudFront提供服务。这也是这种优化的新手。

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

看起来像这样

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

上面的js.gz文件设置了"content-encoding: gzip“元数据字段。总大小为86.0 KB

<?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>

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

我的CloudFront发行版将Compress Objects自动设置为true。虽然我确信这是必要的，因为我的文件已经被压缩了。

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

Uncaught SyntaxError: Unexpected token '<'

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

​

​

我认为我面临的问题是在我的请求中没有设置Accept-Encoding: gzip头文件。但我不清楚该如何添加它。

我的问题是，我对缺少标题的判断正确吗？或者我还遗漏了什么？

Answer 1

我能够通过删除压缩文件上的.gz扩展名来修复此问题。我还在我的s3存储桶cors配置中添加了content-length标头