Hướng dẫn how do i gzip a javascript file? - làm cách nào để gzip một tệp javascript?

Và những gì mà kế hoạch khi một tập tin quá lớn? Zip nó!

Nếu chúng tôi có thể gửi tệp .zip đến trình duyệt (index.html.zip) thay vì chỉ số cũ.html, chúng tôi sẽ lưu về băng thông và thời gian tải xuống. Trình duyệt có thể tải xuống tệp nén, trích xuất nó và sau đó hiển thị cho người dùng, người mà trong tâm trạng tốt vì trang được tải nhanh chóng. Cuộc trò chuyện máy chủ trình duyệt có thể trông như thế này:

1. Trình duyệt: Này, tôi có thể lấy index.html không? Tôi sẽ lấy một phiên bản nén nếu bạn đã nhận được nó.GET index.html? I’ll take a compressed version if you’ve got it.
2. Máy chủ: Hãy để tôi tìm tập tin, yep, nó ở đây. Và bạn sẽ lấy một phiên bản nén? Đáng kinh ngạc.
3. Máy chủ: OK, tôi đã tìm thấy Index.html (200 OK), đang Zipping nó và gửi nó qua.
4. Trình duyệt: Tuyệt vời! Nó chỉ có 10kb. Tôi sẽ giải nén nó và hiển thị cho người dùng.

Công thức rất đơn giản: Tệp nhỏ hơn = Tải xuống nhanh hơn = Người dùng hạnh phúc.happy user.

Don Tiết tin tôi? Phần HTML của trang chủ Yahoo đi từ 101kb đến 15kb sau khi nén:HTML portion of the yahoo home page goes from 101kb to 15kb after compression:

Các chi tiết lông (không phải vậy)

Phần khó khăn của trao đổi này là trình duyệt và máy chủ biết rằng nó OK OK để gửi một tệp bị nén. Thỏa thuận có hai phần

• Trình duyệt gửi một tiêu đề cho máy chủ nói rằng nó chấp nhận nội dung nén (GZIP và độ lệch là hai sơ đồ nén):

  AddOutputFilterByType DEFLATE text/html text/xml text/css text/javascript 
  

  0browser sends a header telling the server it accepts compressed content (gzip and deflate are two compression schemes):

  AddOutputFilterByType DEFLATE text/html text/xml text/css text/javascript 
  

  0

• Máy chủ gửi phản hồi nếu nội dung thực sự được nén:

  AddOutputFilterByType DEFLATE text/html text/xml text/css text/javascript 
  

  1server sends a response if the content is actually compressed:

  AddOutputFilterByType DEFLATE text/html text/xml text/css text/javascript 
  

  1

Nếu máy chủ không gửi tiêu đề phản hồi mã hóa nội dung, điều đó có nghĩa là tệp không được nén (mặc định trên nhiều máy chủ). Tiêu đề mã hóa chấp nhận của người Viking chỉ là một yêu cầu của trình duyệt, không phải là một nhu cầu. Nếu máy chủ không muốn gửi lại nội dung nén, trình duyệt phải thực hiện với phiên bản thường xuyên.

Thiết lập máy chủ

Tin tốt của người Viking là chúng tôi có thể kiểm soát trình duyệt. Nó hoặc gửi tiêu đề

AddOutputFilterByType DEFLATE text/html text/xml text/css text/javascript 

Công việc của chúng tôi là định cấu hình máy chủ để nó trả về nội dung có khóa nếu trình duyệt có thể xử lý nó, lưu băng thông cho mọi người (và cho chúng tôi một người dùng hạnh phúc).

Đối với IIS, bật nén trong cài đặt.IIS, enable compression in the settings.

Trong Apache, việc cho phép nén đầu ra khá đơn giản. Thêm phần sau vào tệp .htaccess của bạn:

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:

SetOutputFilter DEFLATE

Apache thực sự có hai tùy chọn nén:

• mod_deflate dễ dàng hơn để thiết lập và là tiêu chuẩn. is easier to set up and is standard.
• mod_gzip có vẻ mạnh mẽ hơn: bạn có thể có nội dung trước. seems more powerful: you can pre-compress content.

Xử lý là nhanh chóng và hoạt động, vì vậy tôi sử dụng nó; Sử dụng mod_gzip nếu nó nổi thuyền của bạn. Trong cả hai trường hợp, Apache kiểm tra xem trình duyệt có gửi tiêu đề mã hóa được mã hóa của người dùng hay không và trả về phiên bản nén hoặc thông thường của tệp. Tuy nhiên, một số trình duyệt cũ có thể gặp rắc rối (nhiều hơn bên dưới) và có những chỉ thị đặc biệt bạn có thể thêm để sửa điều này.

Nếu bạn có thể thay đổi tệp .htaccess của mình, bạn có thể sử dụng PHP để trả về nội dung nén. Cho tệp HTML của bạn một phần mở rộng .php và thêm mã này vào đầu:PHP to return compressed content. Give your HTML file a .php extension and add this code to the top:

Trong PHP:PHP:

Chúng tôi kiểm tra tiêu đề mã hóa chấp nhận của người Viking và trả về phiên bản Gzipped của tệp (nếu không thì phiên bản thông thường). Điều này gần giống như xây dựng máy chủ web của riêng bạn (những gì thú vị!). Nhưng thực sự, hãy cố gắng sử dụng Apache để nén đầu ra của bạn nếu bạn có thể giúp nó. Bạn không muốn khỉ với các tập tin của bạn.

Xác minh nén của bạn

Khi bạn đã cấu hình máy chủ của mình, hãy kiểm tra để đảm bảo rằng bạn thực sự phục vụ nội dung nén.

• Trực tuyến: Sử dụng thử nghiệm GZIP trực tuyến để kiểm tra xem trang của bạn có bị nén không. Use the online gzip test to check whether your page is compressed.

• Trong trình duyệt của bạn: Trong Chrome, hãy mở Tab Mạng> Tab mạng (Firefox/IE sẽ giống nhau). Làm mới trang của bạn và nhấp vào dòng mạng cho chính trang (nghĩa là,

  AddOutputFilterByType DEFLATE text/html text/xml text/css text/javascript 
  

  3). Tiêu đề mã hóa nội dung: GZIP, có nghĩa là các nội dung đã được gửi nén. In Chrome, open the Developer Tools > Network Tab (Firefox/IE will be similar). Refresh your page, and click the network line for the page itself (i.e.,

  AddOutputFilterByType DEFLATE text/html text/xml text/css text/javascript 
  

  3). The header “Content-encoding: gzip” means the contents were sent compressed.

Nhấp vào biểu tượng sử dụng các hàng lớn của các hàng lớn để có thêm chi tiết, bao gồm kích thước truyền nén và kích thước nội dung thực.

Hãy chuẩn bị để ngạc nhiên trước kết quả. Trang chủ Instacalc bị thu hẹp từ 36K xuống còn 10K, giảm 75% kích thước.

Hãy thử một số ví dụ

Tôi đã thiết lập một số trang và một ví dụ có thể tải xuống:

• index.html - Không nén rõ ràng (trên máy chủ này, tôi đang sử dụng nén theo mặc định).
• index.htm - nén rõ ràng với apache .htaccess bằng cách sử dụng *.htm như một quy tắc
• index.php - nén rõ ràng bằng cách sử dụng tiêu đề PHPPHP header

Vui lòng tải xuống các tệp, đặt chúng trên máy chủ của bạn và điều chỉnh cài đặt.

Hãy cẩn thận

Thật thú vị như nó có thể xuất hiện, HTTP nén không phải là tất cả các trò chơi và trò chơi. Ở đây, những gì cần chú ý:HTTP Compression isn’t all fun and games. Here’s what to watch out for:

• Các trình duyệt cũ hơn: Có, một số trình duyệt vẫn có thể gặp rắc rối với nội dung nén (họ nói rằng họ có thể chấp nhận nó, nhưng thực sự họ có thể). Nếu trang web của bạn hoàn toàn phải hoạt động với NetScape 1.0 trên Windows 95, bạn có thể không muốn sử dụng nén HTTP. Apache mod_deflate có một số quy tắc để tránh nén cho các trình duyệt cũ hơn.: Yes, some browsers still may have trouble with compressed content (they say they can accept it, but really they can’t). If your site absolutely must work with Netscape 1.0 on Windows 95, you may not want to use HTTP Compression. Apache mod_deflate has some rules to avoid compression for older browsers.

• Nội dung đã được áp dụng: Hầu hết các hình ảnh, âm nhạc và video đã được nén. Don lồng lãng phí thời gian nén chúng một lần nữa. Trên thực tế, có lẽ bạn chỉ cần nén các trò chơi Big Big 3 (HTML, CSS và JavaScript).: Most images, music and videos are already compressed. Don’t waste time compressing them again. In fact, you probably only need to compress the “big 3” (HTML, CSS and Javascript).

• CPU-tải: Nén nội dung sử dụng thời gian CPU và lưu băng thông. Thông thường đây là một sự đánh đổi tuyệt vời với tốc độ nén. Có nhiều cách để có nội dung tĩnh trước khi nén và gửi qua các phiên bản nén. Điều này đòi hỏi nhiều cấu hình hơn; Ngay cả khi nó không thể có được, đầu ra nén vẫn có thể là một chiến thắng ròng. Sử dụng các chu kỳ CPU cho trải nghiệm người dùng nhanh hơn là rất đáng giá, với sự chú ý ngắn trên web.-load: Compressing content on-the-fly uses CPU time and saves bandwidth. Usually this is a great tradeoff given the speed of compression. There are ways to pre-compress static content and send over the compressed versions. This requires more configuration; even if it’s not possible, compressing output may still be a net win. Using CPU cycles for a faster user experience is well worth it, given the short attention spans on the web.

Kích hoạt nén là một trong những cách nhanh nhất để cải thiện hiệu suất trang web của bạn. Đi ra, thiết lập nó và để người dùng của bạn tận hưởng những lợi ích.

Các bài viết khác trong loạt bài này

1. Cách tối ưu hóa trang web của bạn với bộ nhớ đệm HTTP
2. Cách tối ưu hóa trang web của bạn với nén GZIP
3. Cách gỡ lỗi các ứng dụng web với Firefox
4. Tăng tốc độ tải JavaScript của bạn
5. Tăng tốc độ JavaScript của bạn, Phần 2: Ví dụ có thể tải xuống!

Làm thế nào để tôi gzip CSS và JavaScript?

Làm thế nào để bạn gzip một tập tin?

Sự khác biệt giữa zip và gzip là gì?

Làm cách nào để kích hoạt nén GZIP cho HTML?