bundle-fu

via:bundle-fu

這個RoR的plugin看起來很棒。我們一般在寫網頁的時候都會依照每一個網頁的需求include 不同的css/js 檔案。例如說,我們有一個main.css 掌控基本的設定,但是在產品檢視頁面可能要include 特定的 product.css/js

不過如果檔案一多的話,connection 開開關關的就會讓網頁變得比較慢才下載完成(不管大小)。所以最佳化的手冊都會告訴我們減少額外include 的檔案數量。

簡單的說,他會把你在網頁中include 的 js/css 各包成一個檔。使用上也很簡單,原本是這樣寫:

<%= javascript_include_tag “prototype" %>
<%= stylesheet_link_tag “basic.css" %>
<%= calendar_date_select_includes “red" %>
<script src="javascripts/application.js" type="text/javascript"></script>

裝了這個plugin之後,只要改成這樣寫:

<% bundle do %>
<%= javascript_include_tag “prototype" %>
<%= stylesheet_link_tag “basic.css" %>
<%= calendar_date_select_includes “red" %>
<script src="javascripts/application.js" type="text/javascript"></script>
<% end %>

最後html的頁面就會被個包成一個檔。像是這樣:

<script src="javascripts/cache/application_bundle.js?1193283359″ type="text/javascript"></script>
<link rel=’stylesheet’ href="javascripts/cache/application_bundle.css?1193283359′ type=’text/css’ />

看起來真的很棒阿 😛

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s