Rails的靜態資源管理(一)——Asset Pipeline是什么


官方文檔:http://guides.ruby-china.org/asset_pipeline.html

http://guides.rubyonrails.org/asset_pipeline.html

1、Asset Pipeline 是什么

Asset Pipeline 提供了用於連接、簡化或壓縮 JavaScript 和 CSS 靜態資源文件的框架。有了 Asset Pipeline,我們還可以使用其他語言和預處理器,例如 CoffeeScript、Sass 和 ERB,編寫這些靜態資源文件。應用中的靜態資源文件還可以自動與其他 gem 中的靜態資源文件合並。例如,與 jquery-rails gem 中包含的 jquery.js 文件合並,從而使 Rails 能夠支持 AJAX 特性。

Asset Pipeline 是通過 sprockets-rails gem 實現的,在 production.rb 配置文件中,通過 config.assets.css_compressor 和 config.assets.js_compressor 選項可以分別為 CSS 和 JavaScript 靜態資源文件設置壓縮方式:

config.assets.css_compressor = :yui

config.assets.js_compressor = :uglifier

 

2、Asset Pipeline 主要特性

  • 連接靜態資源文件,目的是減少渲染網頁時瀏覽器發起的請求次數。Web 瀏覽器能夠同時發起的請求次數是有限的,因此更少的請求次數可能意味着更快的應用加載速度。Sprockets 把所有 JavaScript 文件連接為一個主 .js 文件,把所有 CSS 文件連接為一個主 .css 文件。后文會介紹,我們可以按需定制連接文件的方式。在生產環境中,Rails 會在每個文件名中插入 SHA256 指紋,以便 Web 瀏覽器緩存文件。當我們修改了文件內容,Rails 會自動修改文件名中的指紋,從而讓原有緩存失效。

  • 簡化或壓縮靜態資源文件。對於 CSS 文件,會刪除空格和注釋。對於 JavaScript 文件,可以進行更復雜的處理,我們可以從內置選項中選擇處理方式,也可以自定義處理方式。

  • 可以使用更高級的語言編寫靜態資源文件,再通過預編譯轉換為實際的靜態資源文件。默認支持的高級語言有:用於編寫 CSS 的 Sass,用於編寫 JavaScript 的 CoffeeScript,以及 ERB。

 

3、指紋識別是什么,為什么要關心指紋?

3.1 查詢字符串的策略

以前 Rails 采用的策略,通過內置的輔助方法,為每一個指向靜態資源文件的鏈接添加基於日期生成的查詢字符串。在網頁源代碼中,會生成下面這樣的鏈接:

/stylesheets/global.css?1309495796

使用查詢字符串的策略有如下缺點:

  • 如果一個文件的兩個版本只是文件名的查詢參數不同,這時不是所有緩存都能可靠地更新該文件的緩存。

  • 在多服務器環境中,不同節點上的文件名有可能發生變化。當靜態資源文件被部署到某個節點上時,無法保證文件的時間戳保持不變,這樣,對於同一個文件的請求,不同服務器可能返回不同的文件名。

  • 緩存失效的情況過多。每次部署代碼的新版本時,靜態資源文件都會被重新部署,這些文件的最后修改時間也會發生變化。這樣,不管其內容是否發生變化,客戶端都不得不重新獲取這些文件。

3.2 指紋識別

指紋是一項根據文件內容修改文件名的技術。一旦文件內容發生變化,文件名就會發生變化。對於靜態文件或內容很少發生變化的文件,這項技術提供了確定文件的兩個版本是否相同的簡單方法,特別是在跨服務器和多次部署的情況下。

當一個文件的文件名能夠根據文件內容發生變化,並且能夠保證不會出現重名時,就可以通過設置 HTTP 首部來建議所有緩存(CDN、ISP、網絡設備或 Web 瀏覽器的緩存)都保存該文件的副本。一旦文件內容更新,文件名中的指紋就會發生變化,從而使遠程客戶端發起對文件新副本的請求。這項技術稱為“緩存清除”(cache busting)。

Sprockets 使用指紋的方式是在文件名中添加文件內容的哈希值,並且通常會添加到文件名末尾。例如,對於 CSS 文件 global.css,添加哈希值后文件名可能變為:

global-908e25f4bf641868d8683022a5b62f54.css

使用指紋可以避免使用查詢字符串的這些缺點,並且能夠確保文件內容相同時文件名也相同。Rails 的 Asset Pipeline 也采取了這種策略,在開發環境和生產環境中,指紋都是默認啟用的。通過 config.assets.digest 配置選項,可以啟用或禁用指紋。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM