模块化在前端日新月异的工程化工具的推动下已经摆脱了前端模块加载器（SeaJS、RequireJS）的束缚，现在通常的方案是使用 browserify 或 webpack 来将模块化的文件打包，然后直接在浏览器端使用。
但是通常的打包策略是将整个项目打包成一个文件 bundle.js，默认情况下 bundle.js 中囊括了所有的依赖，包括第三方的从 node_modules 中加载的文件，这会造成 bundle.js 非常臃肿，而且在生产环境中不能很好的利用静态资源的缓存策略。这些打包技术在国外非常火，生产环境提供一个 bundle.js 的做法在国外的网络环境下毫无压力，但是国内的网络环境和国外的没法比，为了下载的性能还是建议分开打包。
分开打包还有一个好处就是，目前的前端开发环境现在都流行使用监测文件的变化而使用 livereload 技术，这也意味着会存在实时动态打包的需求，分开打包对于实时打包的速度有质的影响，对于基本不会变化的第三方模块没有必要每次做实时动态打包的时候都包含进去。
在之前的 前端自动化构建和发布系统的设计（一） 中我有提到过使用 gulp-seajs-combo 合并 JS 模块的问题。在那篇文章中只提供了简单的 demo，当然在 github 上有详细的文档以及测试用例，尽管如此，还是会有人对使用会有诸多疑惑，希望能在看完此文后对使用 gulp-seajs-combo 合并 seajs 模块有更深入的了解。
无论是使用什么样的模块化开发模式，不管是 AMD 还是 CMD，抑或是其他类型的模块化规范，在开发时都会将一个大的应用或功能分割成一些小模块，而到了生产环境，为了能节省 HTTP 请求数，会希望将原来的小模块进行合并。
在开发环境，模块加载器解决了模块的依赖和加载的问题，由于客户端 JS 的使用特性，依赖和加载是绕不开的两个问题，不管你用的是小而美的模块加载器还是看起来很高大上的框架。在生产环境中，对模块按照依赖进行合并，这就是合并工具应该做的事情。
Handlebars 是一款语义化的模板引擎，其模板语法就像是在写普通的 HTML 代码，并且在性能方面也表现优秀。本文将介绍 Handlebars 如何结合 seajs 来使用。
开发者用语义化的代码编写好模板，然后将编写好的模板再进行编译，这个编译环节是必不可少的。服务端的模板也同样需要编译，只是这个编译环节是在服务器上进行的。
前端模板引擎要么是直接在浏览器中进行编译，要么就先将模板进行预编译，预编译的代码是可以直接放到浏览器中运行的。在浏览器中编译就意味着会有一些编译时的性能开销，如果要追求前端性能的话，肯定是使用预编译好的模板。
Handlebars 提供了支持编译和不支持编译的 2 种版本，不支持编译的 runtime 版本只能运行预编译好的模板，而 runtime 版本的库文件理所当然要小得多。
在开发环境中，要确保开发方便，引用的是支持编译的库文件，而在生产环节中，模板经过了预编译，此时引用的是 runtime 版本。
在easy.js的模块加载器的详解(如果你没有阅读过，最好是先去阅读下，这样才能更好的理解这篇博文)中我详细的介绍过有关 easy.js 的加载器的实现。其加载和执行的顺序都要严格依赖队列一个一个的加载和执行，这种加载和执行方式就是串行。此文将介绍模块加载器并行加载的实现。
在讲解并行加载的实现原理之前，首先有必要对 JavaScript 文件的加载的执行有一个初步的了解。
JavaScript 在页面渲染时可能会对 DOM 元素进行修改，并且多个文件之间还会有依赖的关系，因此必须严格按照顺序依次执行，正是由于此种特性就势必对之后的页面资源的加载造成阻塞。但是请注意，这里说到的是按顺序执行。
由于 JavaScript 阻塞的特性，也影响到浏览器对 JavaScript 文件的加载，在老版本浏览器中，加载完就执行，执行完再加载，这正是上面说到的串行加载。为了提升性能，在现代浏览器中，如新版本的 Firefox 和 Chrome，将加载改成了并行。并行加载允许一次性同时加载多个文件，在 HTTP1.1 中，多个文件并行加载只需要发起一个 TCP 连接数。试想下，一条流水线依次生产十个产品肯定要比十条流水线同时生产一个产品要慢得多。虽然在现代浏览器中可以实现并行加载 JavaScript，但是其执行顺序还是要按照顺序来执行的。
之前的 easy.js 的模块加载器的确是按照老版本浏览器串行加载和执行的思路来实现的，而最新版的模块加载器就是按照现代浏览器的并行加载，串行执行的思路来实现的。
模块加载器的实现方法应该比较多，主要还是看哪种实现起来更简单，更易扩展。对于遵循不同规范的模块加载器，实现原理又千差万别。不管是用哪种实现方法，最终都是要满足模块加载器的那些最基本的功能。那么模块加载器的最基本的功能基本就可以概括成下面这几点。
define( "hello", function(){
return "hello world";
});