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

Question

I launched google pagespeed and suggested compressing my .js and .css

Eliminate JavaScript and CSS visualization blocking in the above content Show how to fix it

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). 

At the time of my publication, I have a step that Windows Powershell uses to port the .js and .css mimicking packages to S3, and this applies to the cloud.

Is there any step that I could add to a PowerShell script that would compress .js and .css files?

Also, once the files are compressed, do I need to do more than change the name to tell my browser that it will need to try and accept the gzip file?

Answer 1

You can add the necessary code to your download script so gzip compress files.

Some sample code might be as follows:

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

From this site: Creating Gzip in Powershell

Answer 2

Community extensions Powershell has a scriptlet for gZipping files, and it’s very convenient:

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

You do not need to rename your files, just add the Content-Encoding header and set it to gzip .

Answer 3

Since Amazon S3 is only for static files, it does not compress files (assets), so you need to compress them yourself:

• Compressing your .js and .css using gzip: I don’t know how to do this with PowerShell, but I do it with Python, I propose to deploy a python script (even better fabfile ) and integrate compression and push code into it.

• "Also, once the files are compressed, I need to do something more than change the name to tell my browser that it will need to try and accept the gzip file?": Good questions! There is no need to change the name of the compressed file, I suggest not renaming. However, you:

• MUST also set the header to "Content-Encoding: gzip", otherwise browsers will not know the file.

• Must set the header to 'Content-Type': type (type = 'application / javascript' or 'text / css')

• You must set the header to 'x-amz-acl': 'public-read': make it public.

• I suggest also setting the heading "Cache-Control: max-age = TIME" (example: TIME = 31104000, for 360 days): To help browser caching (better performance)

  / li>

This will work whether it comes from the source or from the cloud interface. But remember that if you serve them with a cloud screen, you will need to cancel all files after each click, otherwise the old version will work up to 24 hours after clicking. Hope this helps, I can provide a python solution if necessary.