优化 RequireJS 项目（合并与压缩）

2013-5-6 11:06| 发布者: joejoe0332| 查看: 2107| 评论: 0|原作者: 裴宝亮|来自: oschina

摘要: 　　本文将演示如何合并与压缩一个基于RequireJS的项目。本文中将用到苦干个工具，这其中就包括Node.js。因此，如果你手头上还没有Node.js可以点击此处下载一个。　　动机　　关于RequireJS已经有很多文章介 ...

弄明白RequireJS Optimizer的所有配置项并不是本文的目的所在，但我想解释（描述）一下本文中我所采用的参数：

参数	描述
appDir	应用程序的目录（即<root>）。在这个文件夹下的所有文件将会被复制到dir参数标注的文件夹下。
baseUrl	相对于appDir，代表查找文件的锚点（that represents the anchor path for finding files）。
dir	这是一个输出目录，所有的应用程序文件将会被复制到该文件夹下。
modules	一个包含多个对象的数组。每个对象代表一个将被优化的模块（module）。
fileExclusionRegExp	任何与此规则匹配的文件或文件夹都将不会被复制到输出目录。由于我们把r.js和build.js放置在应用程序目录下，我们希望优化器（optimizer）排除这两个文件。因此我们可以这样设置/^(r\|build)\.js$/。
optimizeCss	RequireJS Optimizer会自动优化应用程序下的CSS文件。这个参数控制CSS最优化设置。允许的值： “none”, “standard”, “standard.keepLines”, “standard.keepComments”, “standard.keepComments.keepLines”。
removeCombined	如果为true，优化器（optimizer）将从输出目录中删除已合并的文件。
paths	模块（modules）的相对目录。
shim	为那些没有使用define()声名依赖关系及设置模块值的模块，配置依赖关系与“浏览器全局”出口的脚本。

了解RequireJS Optimizer的更多介绍以及更多高级应用，除了其网页早先提供的资料，你可以点击此处查阅所有可用配置选项的详细的信息。

既然现在已经有了构建文件（build file），那么就可以运行优化器（optimizer）了。进入<root> 目录并执行如下命令：

运行优化器（optimizer）

`1`	`$ node r.js -o build.js`

一个新的文件夹会被生成：<root>/dist。重要的是要注意到，现在<root>/dist/js/main.js包含了所有已合并与压缩的具有依赖关系的文件。此外，<root>/dist/css/base.css也被优化了。

运行优化后的项目，它看起来与未优化之前的项目完全一样。再检查一下该页面的网络传输（network traffic）信息，会发现仅有两个JavaScript文件被加载。

Loaded Optimized JavaScript Files List

RequireJs Optimizer将服务器上的脚本文件从13个减少到2个并且将文件的总大小从164KB减少到58.6KB（require.js与main.js）。

开销

显然，在优化之后，我们再也没有必要引用require.js文件了。因为已经没有被分离的脚本文件了并且所有具有依赖关系的文件也已被加载。

尽管如此，优化过程将我们所有的脚本合并生成了一个优化后的脚本文件，其中包含了很多次define() 和require()调用。因此，为了保证应用程序能够正常运行，define()和require()必须指定并实施到应用程序的某处（即包含这些文件）。

这会导致一个众所周知的开销：我们总是会有一些代码实现define()和require()。这些代码并不是应用程序的一部分，它们的存在仅仅是为我们的基础建设考虑（infrastructure considerations）。 当我们开发一个JavaScript库（JavaScript library）时，这个问题变得尤为巨大。相比RequireJS，这些库通常都很小，因此在库中包含它会造成一笔巨大的开销。

在我写这篇文章的时候，对于这方面的开销还没有一个完整的解决方案，但是我们可以使用almond来缓解这个问题。Almond是一个极简单的AMD加载器，它实现了RequireJS接口（API）。因此，可以用来在已优化过的代码中替代RequireJS实现，我们可以在项目中包含almond。
如令，我正致力于开发一个优化器（optimizer），它将能够优化RequireJS应用程序，而无需开销，但它仍然是一个新的项目（处于开发的初期阶段）因此这里没有任何关于它的展示。