Làm thế nào để tổ chức khai thác và đóng gói các tệp css và js để tăng tốc trang web?

Question

Tôi đang tối ưu hóa tốc độ cho ứng dụng trang web của mình. Và tôi tìm thấy một số thực hành để làm điều đó. Ví dụ: Best Practices for Speeding Up Your Web Site từ Yahoo. Trong số đó là:

• Giảm bớt JavaScript và CSS.
• Giảm thiểu số lượng yêu cầu HTTP bằng cách kết hợp nhiều tệp (css, js) thành một.

Câu hỏi của tôi là cơ sở hạ tầng, công cụ và quy trình xây dựng bạn sử dụng hoặc có thể đề xuất thực hiện điều đó?

Answer 1

Bạn có thể sử dụng YUI Compressor.

Nó có thể nén JavaScript cũng như CSS. Chỉ cần chạy nó cho tất cả các tệp của bạn, sau đó ghép chúng vào một tệp 'gói'. Bạn có thể làm điều đó một cách thủ công, viết một Makefile hoặc sử dụng một số tập lệnh để nén "just-in-time" trên yêu cầu web, mặc dù bạn có thể muốn lưu lại tệp kết quả.

Answer 2

Theo JavaScript Compression Rater, công cụ hiệu quả nhất là YUI Compressor hoặc JSMin.

Answer 3

Quạt lớn của Dean Edwards /packer/ bản thân mình - có nhiều hương vị khác nhau.

Answer 4

Mẹo của Yahoo rất tuyệt vời. Tôi sử dụng gomez để kiểm tra kết quả của các nỗ lực tối ưu hóa. Rút gọn là một bước tiến tốt. Tôi đã tìm thấy các tác động lớn hơn thường có thể được thực hiện bằng cách điều chỉnh cách các trang được đặt lại với nhau (đặc biệt là giảm số lượng ảnh được cắt thành từng miếng nhỏ để giảm số lượng yêu cầu). Dù sao, điều này yahoo blog cung cấp cho một tóm tắt khá tốt của các công cụ minification. Tôi thường tránh xa sự quấy rầy trừ khi có một lý do thuyết phục vượt ra ngoài cú đá hiệu suất tương đối nhỏ. Các bước thực tế để cài đặt và sử dụng công cụ rút gọn tương đối đơn giản.

Answer 5

Bằng cách theo dõi yahoo blog liên kết Tôi đã tìm thấy một giải pháp thực sự - "Make your pages load faster by combining and compressing javascript and css files" của Niels Leenheer.

Answer 6

Hoặc bạn có thể chỉ định cấu hình máy chủ HTTP của mình thành GZIP nén tất cả tài liệu văn bản.

Answer 7

Tôi làm ASP.NET, vì vậy tôi sử dụng CruiseControl.NET với NAnt cho quá trình xây dựng của mình. Một phần của quá trình xây dựng này là nén với YUICompressor mà trong kinh nghiệm của tôi là máy nén tốt nhất hiện có.

Nếu bạn không thực hiện ASP.NET, vẫn có CruiseControl gốc với Ant mà bạn có thể sử dụng với cùng dung lượng.

Lý do tôi thấy điều này được thiết lập tốt hơn là vì a) tất cả các công cụ tẻ nhạt là tự động và b) nếu bạn đang thử nghiệm trên máy của riêng mình, bạn không phải gỡ lỗi một chuỗi siêu dài của JS :)

Answer 8

Tôi đã được giảm thiểu tích hợp vào quá trình triển khai của mình. Tôi làm điều đó trong perl với các gói JavaScript::Minifier và CSS::Minifier.

Trong quá trình phát triển, tôi muốn giữ cho tập lệnh được mở rộng.Tôi đặt một số nhận xét trong HTML của mình để tập lệnh của tôi biết những tệp nào cần đặt cùng nhau và rút gọn:

Một vài biểu thức chính quy và tôi nhanh chóng có được phiên bản "sản xuất" với các tệp được rút gọn.

Answer 9

Đối nén tất cả mọi thứ trước khi tải nó lên web, chương trình này là rất tốt cho cả CSS/JS/HTML:

http://www.w3compiler.com/

Nó thậm chí có thể chọn khu vực không để nén, vì nó không phải là tất cả các mã MVC trong đánh dấu của bạn hỗ trợ việc nén.

Và nó lưu tệp sao lưu mỗi lần nén tệp của bạn, vì vậy bạn có thể dễ dàng giải nén tệp chỉ bằng một lần nhấp.

Answer 10

Tôi đã tìm thấy Minify hữu ích nhất cho các dự án PHP của mình. Rất dễ sử dụng, chỉ cần tiết kiệm thời gian cấu hình giảm thiểu, nén và bộ nhớ đệm của các tệp CSS và JS theo cách thủ công. Cũng có một tính năng nhóm gọn gàng.

Một số lưu ý về YUI Compressor

1. YUI Compressor tạo ra mà không cần ngắt dòng ở tất cả trong khi có một số Rút gọn.
2. Hãy cẩn thận nếu bạn đã thoát chuỗi. Tôi đã phát hiện ra rằng YUI Compressor unescapes chúng. Vì vậy, các chuỗi như "\" trở thành "" ".

Answer 11

Tôi đã viết trình quản lý tùy chỉnh của riêng mình cho việc này. Nó sử dụng trình biên dịch đóng cửa của google và nén tệp chỉ khi cần trong chế độ phát hành. Check it out:

http://www.picnet.com.au/blogs/Guido/post/2009/12/10/Javascript-runtime-compilation-using-AspNet-and-Googles-Closure-Compiler.aspx

Cảm ơn

Guido Tapia