Rails app 既然是 web app 就多少會用到 jQuery ，我們雖然有 jquery-rails gem 可以直接用，但並不是最好的方法。透過一些小技巧，可以省下一點點網路流量。

以下是前陣子研究出來的實作方法，不確定是不是 Best Practice ，但至少是 Better Practice。

jQuery 本體：通過 Google CDN

現在我們有 Google 的 CDN 可以拉 jQuery ，使用它的話可以幫你省下約 32KB 的網路流量，尤其以常常 deploy 新版本的網站來說，每次 application.js 有異動就得重新下載，把 jQuery 交給 Google CDN 的話， browser 就不必重新下載 jQuery 了。而且 Google CDN 有不少網站都在使用，它的 header 裡面指定的 cache 時效又很久，所以 browser 只要下載一次，以後都不會再下載了（前提是 jQuery 的 cache 沒有被 browser 清掉）。

但在使用它之前，還是得先安裝 jquery-rails gem。

jquery-rails gem

在 Gemfile 加入這一行然後跑 bundle install

gem "jquery-rails"

但是一定要把 //= require jquery 從 assets pipeline 的 JavaScript 裡面移除。

你或許會想說，不 require 它，還安裝 gem 做什麼？因為我們要 Rails app 能夠輸出一個獨立的 jquery.min.js ，好讓 browser 連不上 Google CDN 的時候，還可以從 Rails 下載 jQuery，為了保持版本號一致，才要安裝 jquery-rails。

從 Google CDN 拉 jQuery

在 view 裡面這樣寫，使用 Google CDN 來拉 jQuery ：

<%= javascript_include_tag "//ajax.googleapis.com/ajax/libs/jquery/#{Jquery::Rails::JQUERY_VERSION}/jquery.min.js" %>
<script>window.jQuery || document.write('<script src="<%= javascript_path("jquery.min") %>"><\/script>')</script>

第 1 行是從 Google 的 CDN 拉壓縮過（minified + gzipped）的 jQuery 回來。其中 Jquery::Rails::JQUERY_VERSION 可以得到 jquery-rails gem 所帶的 jQuery 版本號碼，以求與下面的 local fallback 版號一致。

第 2 行則是可以避免使用者的網路暫時不能從 Google CDN 下載 jQuery （或 Google CDN 掛了，或在不能上網的地方寫程式），先檢查 window.jQuery 有沒有存在，沒有的話就插入一個 <script> tag 來載入 Rails app 提供的 jquery.min.js (Local Fallback)，為了維持版號一致，第 1 行裡面用一個 constant 來替換掉寫死的 jQuery 版號。

使用 document.write 的理由是要同步載入，如果用 JavaScript 動態產生 HTMLScriptElement 再插入，則會變成非同步載入，很有可能它執行到第一個 $ 的時候， jquery.min.js 還沒下載執行完，那就會噴 undefined variable exception 了。

Local Fallback

為了讓 Rails app 可以提供 jquery.min.js ，有兩個做法。

一個是在 config/environments/production.rb 指定 precompile 它

config.assets.precompile += ["jquery.min.js"]

另一個做法是打開：

config.assets.compile = true

這樣子的話第一個需要從 Rails 下載的人會最衰，他要等 Rails 在線上同步 compile jquery.min.js （之後 assets pipeline 會 cache 它）。但考量到 Google CDN 的 availability 很高，那遇到這種衰事的人應該也很少，所以這不失為一個方法。

jQuery UI

jQuery UI 也是常用的 Library ，不過一整包拉下來其實很大包，而且 jquery-rails 這個 gem 裡面，只有 jQuery UI 的 JavaScript ，沒有 jQuery UI 的 CSS 和圖檔（這樣是要怎麼玩…）。

我們可以使用 jquery-ui-rails 這個 gem 。它把所有的 jQuery UI modules 一個一個拆開，再接到 sprockets 來管理 dependency。

於是你如果要使用 jQuery UI Tabs 的話，你只要在你的 JavaScript 裡面寫一行：

//= require jquery.ui.tabs

再在 CSS 裡面寫一行：

/*
 *= require jquery.ui.tabs
 */

就好了！它的 dependency core 和 widget 都不需要手動 require。但有時候會有衝突，例如 jquery.ui.droppable 裡面有 jquery.ui.draggable ，所以不能再 require 後者。遇到衝突的時候 Assets Pipeline 會噴奇怪的錯誤訊息，這時候可以到 jquery-ui-rails 的 repository 檢查一下 dependency 。（重覆 require dependency 會出錯？這不科學。）

不過這個 gem 目前有個問題是，它會在產生的 jQuery UI JavaScript 裡面綁 jQuery ，所以如果你又從 CDN 下載 jQuery 的話，等於是下載兩次、執行兩次。

怎麼解決呢？我們暫時是用以下的方法解決。

jquery-ui-rails gem (Techbang-modified)

在此介紹我們 T客邦 自己 fork 的版本，因為我們有針對它與 jQuery from Google CDN 配合的情況，特別調整過。

Gemfile 裡加入：

gem "jquery-ui-rails", :github => "techbang/jquery-ui-rails", :tag => "techbang-v2.1.0"

這樣就 OK 了，用法跟原版的 jquery-ui-rails 一樣，只差在必須手動載入 jQuery 。不過這個 fork 要解決的問題就是 jQuery from CDN 的重覆下載、重覆執行問題，所以，本來就是要手動從 CDN 載入 jQuery 的。

至於 Pull Request ，後來發現有人送了一樣功能的異動，等他 merge 之後我會把這個段落給更新。

如果你真的需要一整包 jQuery UI

我不建議這樣做。它很大包，光是 JavaScript 的話就算 minify + gzip 也要 60KB+ ，實際上可能只會用到少數元件。最好的方法是有用到的再包進 Assets Pipeline ，從自己的伺服器下載。但如果你真的需要整包，應該也從 CDN 下載。

不過原版的 jquery-ui-rails 無從得知 jQuery UI 版號， T客邦的 fork 有加上 Jquery::Ui::Rails::JQUERY_UI_VERSION 這個常數，從這裡可以得知版號，就不會拉錯了。jQuery UI 的版號尤其重要，因為 major 版號不同還可能會導致 CSS 爆掉。

例如，從 Google CDN 下載：

<%= javascript_include_tag "//ajax.googleapis.com/ajax/libs/jqueryui/#{Jquery::Ui::Rails::JQUERY_UI_VERSION}/jquery-ui.min.js" %>
<script>window.jQuery || document.write('<script src="<%= javascript_path("jquery.ui.all") %>"><\/script>')</script>

但是， Google CDN 只有提供 JavaScript ，沒有提供 CSS 和圖片素材。所以要是你需要 CSS 的話，應該是要使用官方的 CDN （詳見 jQuery UI 網站頁尾）。但 remote CSS 我不知道有什麼方法可以測試「下載失敗」的情況，我也沒這樣使用過，所以就等有需要的人研究吧。