使用 YCombo 做 JS 開發

前文已介紹過 YCombo 及相關的 CSS 和 JS 合并工具 . 合并靜態文件, 減少頁面請求可以有效提升網頁性能, 但手動處理的話工作繁雜易于出錯, YCombo 就是為了解決這個問題而誕生的工具. 這不是最先進的解決方案, 但對小型網站來說已是游刃有余了.

少于 10 個經常改動的頁面應該可以算是小型網站, 當然, 博客也算是, 這個博客現在就是使用這個工具來輔助開發的. 本文作為延伸, 說說平時我是怎樣利用這個工具來完成網頁開發的.

拆分 JS 模塊

JavaScript 模塊化和細分成文件是為了減少代碼的復雜度和便于代碼復用, 我將網站用到的 JavaScript 代碼分類以下幾類:

• 第三方的框架和工具類, 沿用 YUI3 的命名定義, 我稱之 Gallery 庫, 比如: jQuery, Backbone
• WordPress 插件中用到的 JS 文件, 有時我們想合并掉這些文件以減少頁面請求數量.
• 可以供第三方使用的組件和工具, 比如: go-top.js, sidebar-follow.js 和 view-history.js.
• 自己網站上用到的一些共用代碼, 比如: NeoEase 所有頁面用到的二級菜單 categories.js.
• 業務 / 頁面初始化文件, 這里往往會調用其他一些組件, 還會有一些頁面特有的代碼. 我覺得 WordPress 這中小網站都不需要區分頁面了, 作為一個入口即可.

準備配置文件

模塊拆分完成后, 我們可以按照 YCombo 配置文件的方式 創建一個后綴名為 .js.seed 的配置文件將 JS 文件組織起來. 我用相對路徑的方式, 配置如下:

/* 第三方庫 */
// #require "gallery/jquery/jquery.js"
// #require "gallery/jquery/jquery.scrollto.js"
// #require "gallery/jquery/jquery.lazyhover.js"
// #require "gallery/json/json2.js"

/* 組件 */
// #require "moudle/scroll-trigger.js"
// #require "moudle/view-history.js"
// #require "moudle/article-history.js"
// #require "moudle/sidebar-follow-jquery.js"
// #require "moudle/go-top.js"

/* 插件 */
// #require "plugin/wp-recentcomments/wp-recentcomments-jquery.dev.js"

/* 共用代碼 */
// #require "common/social.js"
// #require "common/comments.js"
// #require "common/categories.js"

/* 頁面初始化 */
// #require "biz/domready.js"

/* Rating 初始化 */
// #require "common/ratings.js"

合并和調試代碼

將配置文件 xxx.js.seed 拖放到 YComboGUI 或者 JCombo 工具內, 即可得到合并后文件 xxx.js. 調試代碼的時候, 為了能定位代碼出錯位置我們只合并不壓縮, 所以我會選中 nocompress .

每次修改代碼后, 點擊 Combo! 重新合并代碼和進行調試, 直到開發完成.

壓縮和混淆代碼

一旦開發完成, 取消選中 nocompress 并再次進行壓縮, YCombo 通過 YUI Compressor 對代碼進行合并和壓縮, 可以減去注釋, 額外空格, 一些細微的優化和進行標識符替換.

如果還需要進一步壓縮或者混淆代碼, 可以使用 Pack 等一些工具再對代碼進行處理, 而我會到 在線 JavaScript 壓縮和混淆工具 上進行一次混淆.

使用 YCombo 做 JS 開發, 可以做到將細分在多個文件中的 JavaScript 合并在一起, 從而減少頁面請求數量. 開發者每次修改后需要多點一次合并按鈕, 但是還算是方便的, 對小型網站來說應該足夠了.

哦, 對. YCombo 還可以用來處理 CSS 文件.