官方文檔: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
配置選項,可以啟用或禁用指紋。