Kiến thức cơ bản Asset Pipeline trong Ruby on Rails

  • Monday 22/07/2024

Asset Pipeline là gì?

Asset Pipeline là một khái niệm trong phát triển web, thường được sử dụng trong các framework như Ruby on Rails. Nó thường để quản lý và tối ưu hóa các tài nguyên tĩnh của ứng dụng web, bao gồm CSS, JavaScript, và hình ảnh. Ngoài ra, Asset Pipeline còn cho phép chúng ta có thể viết CSS, JS bằng một số ngôn ngữ khác nữa như CoffeeScript, Sass hay ERB.

Trên thực tế các file assets trong ứng dụng được kết nối một cách tự động cùng với những assets chứa trong gem. Asset pipeline được thực hiện bởi gem sprockets-rails , thông thường khi khởi tạo ứng dụng rails nó sẽ mặc định được enable. Rails tự động thêm vào các gem sass-rails, coffee-rails và uglifier được sử dụng bởi sprockets cho phép nén các asset.

Asset Pipeline

Một số chức năng chính của Asset Pipeline

1. Tổ chức và quản lý tệp

Asset Pipeline cho phép chúng ta tổ chức các tệp CSS và JavaScript của mình trong các thư mục hợp lý, giúp dễ dàng quản lý và duy trì:

  • Tệp tài nguyên được đặt trong các thư mục app/assets, lib/assets, và vendor/assets.
  • Ví dụ: CSS tệp được đặt trong app/assets/stylesheets và JavaScript trong app/assets/javascripts.

2. Tiền xử lý

Nó hỗ trợ tiền xử lý các tệp, chẳng hạn như chuyển đổi Sass hoặc LESS sang CSS, hoặc CoffeeScript sang JavaScript. Điều này cho phép chúng ta sử dụng cú pháp tiên tiến và các tính năng của các ngôn ngữ này trong khi vẫn xuất ra các tệp CSS và JavaScript chuẩn. Sau đó, nó hỗ trợ chuyển đổi các tệp .scss thành .css và .coffee thành .js.

3. Nén và gộp

Asset Pipeline có thể tự động nén và gộp các tệp CSS và JavaScript của bạn, giúp giảm kích thước tệp và số lượng yêu cầu HTTP, từ đó cải thiện và tăng hiệu suất tải trang.

4. Quản lý bộ nhớ đệm (Cache)

Nó thêm một dấu thời gian hoặc mã băm vào tên tệp tài nguyên, giúp quản lý bộ nhớ đệm (cache) của trình duyệt. Điều này đảm bảo rằng người dùng sẽ luôn tải phiên bản mới nhất của tài nguyên khi chúng được cập nhật.

Sử dụng fingerprinting, ví dụ: application-4bd62b5f.css.

5. Sử dụng Manifests

Khi triển khai ứng dụng, Asset Pipeline tạo ra các tệp tài nguyên đã được tối ưu hóa và sẵn sàng để phân phối, giúp quá trình triển khai trở nên dễ dàng và hiệu quả hơn.

Ví dụ: Tất cả các tệp CSS và JavaScript sẽ được nén và đặt vào thư mục public/assets khi triển khai.

Một số ví dụ minh họa

Giả sử chúng ta có một ứng dụng Rails với các tệp tài nguyên sau:

  • Sass File: app/assets/stylesheets/style.scss

Asset Pipeline

  • CoffeeScript File: app/assets/javascripts/script.coffee

Asset Pipeline

  • Application Manifest: app/assets/stylesheets/application.css

Asset Pipeline

  • Application Manifest: app/assets/javascripts/application.js

Asset Pipeline

Khi chạy ứng dụng, Asset Pipeline sẽ thực thi:

  • Tiền Xử Lý:
    • style.scss được chuyển thành style.css.
    • script.coffee được chuyển thành script.js.
  • Gộp và Nén:
    • Tất cả các tệp CSS được gộp vào application.css, và tất cả JavaScript vào application.js.
    • Các tệp này được nén để giảm kích thước.
  • Quản Lý Cache:
    • Rails thêm mã băm vào tên tệp để quản lý bộ nhớ đệm, chẳng hạn application-4bd62b5f.css.

Sử Dụng Trong View

Trong view, chúng ta chỉ cần tham chiếu đến các tệp gốc mà không cần lo lắng về mã băm:

Asset Pipeline

Khi triển khai ứng dụng, Asset Pipeline sẽ đảm bảo rằng tất cả tài nguyên được tối ưu hóa, giúp trang web tải nhanh hơn và cải thiện trải nghiệm người dùng. Các tệp application.css và application.js sẽ được tải với tên có mã băm, đảm bảo rằng các phiên bản cũ không bị lưu trong bộ nhớ đệm của trình duyệt.

Bằng cách này, Asset Pipeline giúp giảm thiểu công sức cần thiết để quản lý tài nguyên tĩnh trong ứng dụng Rails, cho phép chúng ta tập trung vào phát triển tính năng của ứng dụng.

Hy vọng qua bài viết này mọi người sẽ có thông tin hữu ích và hiểu rõ hơn thông tin về Asset Pipeline trong Ruby on Rails .


P.A Việt Nam cung cấp đa dạng các Plan Hosting đáp ứng yêu cầu của khách hàng
Hosting Phổ Thông
Hosting Chất Lượng Cao
Hosting WordPress

Tham khảo các ưu đãi: https://www.pavietnam.vn/vn/tin-khuyen-mai/

5/5 - (1 bình chọn)