雨夜带刀's Blog

使用 gulp-seajs-combo 合并 seajs 模块

在之前的 前端自动化构建和发布系统的设计(一) 中我有提到过使用 gulp-seajs-combo 合并 JS 模块的问题。在那篇文章中只提供了简单的 demo,当然在 github 上有详细的文档以及测试用例,尽管如此,还是会有人对使用会有诸多疑惑,希望能在看完此文后对使用 gulp-seajs-combo 合并 seajs 模块有更深入的了解。

无论是使用什么样的模块化开发模式,不管是 AMD 还是 CMD,抑或是其他类型的模块化规范,在开发时都会将一个大的应用或功能分割成一些小模块,而到了生产环境,为了能节省 HTTP 请求数,会希望将原来的小模块进行合并。

在开发环境,模块加载器解决了模块的依赖和加载的问题,由于客户端 JS 的使用特性,依赖和加载是绕不开的两个问题,不管你用的是小而美的模块加载器还是看起来很高大上的框架。在生产环境中,对模块按照依赖进行合并,这就是合并工具应该做的事情。

Handlebars 和 SeaJS 的结合使用

Handlebars 是一款语义化的模板引擎,其模板语法就像是在写普通的 HTML 代码,并且在性能方面也表现优秀。本文将介绍 Handlebars 如何结合 seajs 来使用。

模板引擎的编译和预编译

开发者用语义化的代码编写好模板,然后将编写好的模板再进行编译,这个编译环节是必不可少的。服务端的模板也同样需要编译,只是这个编译环节是在服务器上进行的。

前端模板引擎要么是直接在浏览器中进行编译,要么就先将模板进行预编译,预编译的代码是可以直接放到浏览器中运行的。在浏览器中编译就意味着会有一些编译时的性能开销,如果要追求前端性能的话,肯定是使用预编译好的模板。

Handlebars 提供了支持编译和不支持编译的 2 种版本,不支持编译的 runtime 版本只能运行预编译好的模板,而 runtime 版本的库文件理所当然要小得多。

在开发环境中,要确保开发方便,引用的是支持编译的库文件,而在生产环节中,模板经过了预编译,此时引用的是 runtime 版本。

头像

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。