Làm cách nào để kết hợp JS/CSS cho Amazon S3?

Question

Trên trang web VPS thông thường, tôi sẽ sử dụng Minify để nén và kết hợp nhiều tệp CSS/JS để trang web chỉ sử dụng 1 hoặc 2 yêu cầu HTTP. Một trang web mà tôi đang làm bây giờ có các tệp CSS/JS được lưu trữ trên Amazon S3 và được phục vụ thông qua Amazon CloudFront. Rõ ràng Minify là một ứng dụng PHP5 và không thể chạy trên AWS.

Tôi có thể nén tập lệnh dễ dàng trước khi tải lên nhưng cách tốt nhất để kết hợp tập lệnh trên AWS S3 để giảm yêu cầu HTTP là gì?

http://code.google.com/p/minify/

Answer 1

Rút gọn kết hợp và minifies JS/CSS khi đang bay.

S3 và CloudFront phân phối tệp tĩnh - bạn sẽ phải kết hợp và rút gọn chúng trước khi tải lên. Thật dễ dàng - ghép các tệp lại với nhau và rút gọn với YUI Compressor hoặc Google Closure Compiler (2 bộ giải mã dòng lệnh đa nền tảng miễn phí).

Nó thường thuận tiện để có một kịch bản hoặc xây dựng bước thực hiện điều này, một cái gì đó như:

#!/bin/bash 
cat a.js b.js c.js | java -jar yuicompressor-1.4.2.jar --type js -o output.min.js 

Trên Windows, một lựa chọn tuyệt vời là Microsoft's Ajax Minifier.

Answer 2

Khi CloudFront nhận được bộ nhớ cache tạm thời, nó yêu cầu nội dung từ máy chủ gốc được cấu hình của phân phối. Trong hầu hết các trường hợp, thùng S3 được cấu hình là nguồn gốc. Vì vậy, cách dễ nhất là kết hợp và rút gọn JS và CSS của bạn là lưu trữ nó trong S3 như là một phần của quá trình xây dựng/triển khai của bạn.

Nếu bạn thực sự muốn giảm thiểu nhanh chóng, bạn có thể định cấu hình CloudFront để sử dụng "Nguồn gốc tùy chỉnh". Trong cấu hình phân phối các lần truy cập bộ nhớ cache này sẽ được yêu cầu từ máy chủ của bạn đang chạy Minify.

Xem tài liệu CloudFront theo số creating distributions để biết chi tiết.

Answer 3

Nếu bạn dự định phân phối nội dung tĩnh từ S3/CloudFront, tôi khuyên bạn nên nén nội dung của mình trước thời hạn. Cá nhân, tôi sử dụng Juicer. Khi bạn đã thực hiện điều đó, bạn có thể gzip -9 các tệp sản xuất của mình và tải chúng lên S3 với tiêu đề Content-Encoding: gzip.

Sự cố khi nén khi đang di chuyển là hiệu suất mà trang web của bạn đạt được. Hỗ trợ tùy chỉnh nguồn gốc CloudFront giảm bớt điều này một chút, nhưng nó sẽ thực sự dễ dàng để tự động triển khai của bạn với một công cụ như Capistrano mà điều này làm việc cho bạn. Đây là cách tiếp cận của tôi, bản thân tôi.

Answer 4

Mới - Hỗ trợ nén Gzip cho Amazon CloudFront, Check here.

Kích hoạt Gzip nén

Bạn có thể bật tính năng này trong một phút! Chỉ cần mở Bảng điều khiển CloudFront, định vị phân phối của bạn và đặt Nén đối tượng Tự động thành Có trong tùy chọn Hành vi: