要讓網頁存取加快有很多技巧,其中之一就是減少 HTTP 的請求數量。由於瀏覽器允許同時發出的 HTTP 請求有數量的限制,藉由減少請求數量,可以減少等待請求完成時間以達到加速網頁存取目的。本文山姆鍋將分享如何使用 Jekyll Asset Pipeline 插件來減少並且迷你化 CSS/JS 檔案。
安裝 Jekyll Asset Pipeline 插件
這個插件是透過 Ruby Gem 安裝,在命令列執行:
$ gem install jekyll-asset-pipeline
壓縮 JavaScript 以及 CSS 檔案時,需要用到 YUI Compressor,按照下列指令安裝:
$ gem install yui-compressor
在 Gemfile 中的’:development’ group,加入下列項目:
gem "jekyll-asset-pipeline"
gem "yui-compressor"
安裝 Jekyll Asset Pipeline 插件
在 Octopress 的 plugins 目錄中,新增名為’jekyll_asset_pipeline.rb’的檔案,內容如下:
require 'jekyll_asset_pipeline'
module JekyllAssetPipeline
class CssCompressor < JekyllAssetPipeline::Compressor
require 'yui/compressor'
def self.filetype
'.css'
end
def compress
return YUI::CssCompressor.new.compress(@content)
end
end
class JavaScriptCompressor < JekyllAssetPipeline::Compressor
require 'yui/compressor'
#require 'closure-compiler'
def self.filetype
'.js'
end
def compress
return YUI::JavaScriptCompressor.new(munge: true).compress(@content)
#return Closure::Compiler.new.compile(@content)
end
end
end
匯整並迷你化 CSS/JS 檔案
這個步驟需要修改的檔案會根據您使用的樣版(template)而定,一般是修改下列檔案:
source/_include/head.html
source/_include/custom/head.html
source/_include?custom/after_footer.html
把要匯整成同一個檔案的 CSS 檔案,按照下列方式指定:
- /_assets/styles/aqpb-view.css
- /_assets/styles/frontend.css
- /_assets/styles/foundation.min.css
- /_assets/styles/options.css
- /_assets/styles/app.css
- /_assets/styles/responsive.css
- /_assets/styles/colorbox.css
其中,‘global’是產出的 CSS 檔名前綴,產出的檔案名稱後面還會加上版號。檔名看起來會像是’global-dd5a45262af5235d70403ad9ed37adcc.css’,並放置在’public/assets’目錄中。Jekyll Asset Pipeline 會在 HTML 幫我們設定好來加載這個 CSS 檔。
把要匯整成同一個檔案的 JS 檔,按照下列方式指定:
- /_assets/scripts/jquery.min.js
- /_assets/scripts/app.js
其中,‘global’是產出檔名的前綴,產生的 JS 檔明類似’global-b4c189f3acc9945b3087071a918a4844.js’。同樣地,Jekyll Asset Pipeline 插件會幫我們設定
設定 Jekyll Asset Pipeline 插件
雖然減少 CSS/JS 檔案數量,對於網頁存取速度是好事。但是有時我們還是需要暫時取消匯整或者迷你化的動作,像找 CSS/JS 中的錯誤。為了方便可以決定要不要處理 CSS/JS 檔,將以下設定加到 _config.yml。
# asset processing configuration
asset_pipeline:
bundle: true # Default = true
compress: true # Default = true
# output_path: assets # Default = assets
# display_path: nil # Default = nil
gzip: false # Default = false
其中,‘bundle’決定是否要會整 CSS/JS 檔案;‘compress’決定是否迷你化。 ‘gzip’設成 false 是因為山姆鍋部署間對使用 s3cmd 來完成 GZip 壓縮工作。
小結
完成上述步驟後,每次只要我們產生網站內容,就會進行 CSS/JS 檔案匯整與迷你化的動作,就算暫時需要取消這些動作,也有了方便的地方可以開關。加速網頁存取還有不少技巧,在之後的文章,山姆鍋將介紹如何使用 s3cmd 來壓縮上傳到 Amazon S3 上的檔案以減少頻寬的耗用。