如何从 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 文件具有“content-encoding：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 标头。但我不清楚应该如何添加它。

我的问题是，我对丢失的标头的看法是否正确？或者我还错过了什么？

Answer 1

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

Answer 2

我尝试了你的方法，目前我使用压缩插件逻辑如下

new CompressionPlugin({
      filename: "[path][base]",
      algorithm: 'gzip',
      deleteOriginalAssets: true,
      test: /\.(js|css|html|svg|png|webp|otf|gif)$/,
      threshold: 10240,
      minRatio: 0.8
    })
    ```

This compressed the files and did not add .gz extension
Additionally i also added s3 cors policy header to Content-Length
But still i am seeing the same issue.

未捕获的语法错误：无效或意外的令牌（位于remoteEntry.js：1：1）

Additonally i want to let you know that cloudfront uses its default compression technique (br/gzip compression)

Any suggestions you have would be fruitful....