在发布到 AWS S3 之前，如何压缩/gzip 我的 mimified .js 和 .css 文件？

Question

I 运行 Google pagespeed 并且它建议压缩我的 .js 和 .css

消除首屏内容中的渲染阻塞 JavaScript 和 CSS 显示如何修复

Enable compression
Compressing resources with gzip or deflate can reduce the number of bytes sent over the network.
Enable compression for the following resources to reduce their transfer size by 210.9KiB (68% reduction).
Compressing http://xx.com/content/bundles/js.min.js could save 157.3KiB (65% reduction).
Compressing http://xx.com/content/bundles/css.min.css could save 35.5KiB (79% reduction).
Compressing http://xx.com/ could save 18.1KiB (79% reduction).

在我的发布过程中，我有一个步骤使用 Windows Powershell 将 .js 和 .css mimified 包移动到 S3，然后转到云端。

我可以在 PowerShell 脚本中添加一些步骤来压缩 .js 和 .css 文件吗？

此外，一旦文件被压缩，除了更改名称以告诉我的浏览器它需要尝试接受 gzip 文件外，我还需要做其他事情吗？

Answer 1

您可以在上传脚本中添加 gzip 压缩文件所需的代码。

一些示例代码可能是这样的：

function Gzip-FileSimple
{
    param
    (
        [String]$inFile = $(throw "Gzip-File: No filename specified"),
        [String]$outFile = $($inFile + ".gz"),
        [switch]$delete # Delete the original file
    )

    trap
    {
        Write-Host "Received an exception: $_.  Exiting."
        break
    }

    if (! (Test-Path $inFile))
    {
        "Input file $inFile does not exist."
        exit 1
    }

    Write-Host "Compressing $inFile to $outFile."

    $input = New-Object System.IO.FileStream $inFile, ([IO.FileMode]::Open), ([IO.FileAccess]::Read), ([IO.FileShare]::Read)

    $buffer = New-Object byte[]($input.Length)
    $byteCount = $input.Read($buffer, 0, $input.Length)

    if ($byteCount -ne $input.Length)
    {
        $input.Close()
        Write-Host "Failure reading $inFile."
        exit 2
    }
    $input.Close()

    $output = New-Object System.IO.FileStream $outFile, ([IO.FileMode]::Create), ([IO.FileAccess]::Write), ([IO.FileShare]::None)
    $gzipStream = New-Object System.IO.Compression.GzipStream $output, ([IO.Compression.CompressionMode]::Compress)

    $gzipStream.Write($buffer, 0, $buffer.Length)
    $gzipStream.Close()

    $output.Close()

    if ($delete)
    {
        Remove-Item $inFile
    }
}

来自此站点：Gzip creation in Powershell

Answer 2

Powershell community extensions 有一个 gZipping 文件的小脚本，使用起来非常简单：

Write-Gzip foo.js #will create foo.js.gz
mv foo.js.gz foo.js -Force

您不必重命名文件，只需添加 Content-Encoding header 并将其设置为 gzip.

Answer 3

由于 Amazon S3 旨在仅提供静态文件，它不会压缩文件（资产），因此您需要自己压缩它们：

使用 gzip 压缩您的 .js 和 .css：我不知道如何使用 PowerShell，但我使用 Python，我建议制作一个 python部署脚本（更好的是fabfile）并在其上集成压缩和推送代码。
"Also once the files are compressed then do I have to do anything more than change the name so as to tell my browser that it will need to try and accept a gzip file?"：好问题！压缩文件的名字没必要改，建议不要重命名。然而，你：
必须同时设置 header "Content-Encoding:gzip" 否则浏览器将无法识别该文件。
必须设置headers 'Content-Type': type (type = 'application/javascript' or 'text/css')
必须设置 header 'x-amz-acl': 'public-read': 使其 public 可访问。
我还建议设置 header "Cache-Control:max-age=TIME"（例如：TIME=31104000，360 天）：帮助浏览器缓存它（更好的性能）

无论是从源服务还是通过云端服务，这都将有效。但请记住，如果您使用 cloudfront 为它们提供服务，您将需要在每次推送后使所有文件失效，否则旧版本将在推送后长达 24 小时内存活。希望这对您有所帮助，如果需要，我可以提供 python 解决方案。

在发布到 AWS S3 之前，如何压缩/gzip 我的 mimified .js 和 .css 文件？

How can I compress / gzip my mimified .js and .css files before publishing to AWS S3?

css

powershell

gzip

amazon-s3

amazon-web-services