本文转自：http://www.neoease.com/minimize-javascript-files-using-ycombo/
前文已介绍过 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 文件.