前端优化：RequireJS Optimizer 的使用和配置方法（一）

前言

前端javascript文件越来越多了，依赖加载，文件合并的问题也就随之出现。好在有基于AMD规范的requirejs和国产基于CMD规范的seajs可以管理依赖。但是，使用这样的js来管理js模块的依赖，就会导致页面js文件请求就会变多，为了减少文件请求，一般的文件拼合工具就不起作用了，比如grunt的concat工具。

好在requirejs有r.js来解决这个问题。而且使用也简单，容易上手。

PS：之所以没选择优秀的seajs，是因为spm打包工具实在是难以上手。

开始上手

在开始之前，我们假定你已经掌握了requirejs的使用，若是不懂，可以看看阮一峰老师的相关文章，写得很好。另外，你需要有node环境和git，那么这些条件都准备充足了，神马都好办了。

尽管官方英文文档也有API，但是，写得比较啰嗦，在命令行敲配置，实在是很二逼的做法啊！想不通为何不直接写使用build.js来进行任务配置。

好，先看看我自己建立的测试文档，目录如下图：

目录中，r.js和require.js两者缺一不可。

abc 代码如下：

a.js:

define({
    color:'red'
});

b.js:

require.config({
    baseUrl: 'js'
});
define(['a'], function(a) {
    console.log('b.js:' + a.color);
    return {
        color: a.color,
        width: '120px'
    };
});

c.js:

require.config({
    baseUrl:'js'
});
define(['b'],function(b){
    console.log('run c.js :'+b.color+','+b.width);
});

从代码可以看出，b.js依赖于a.js，c.js依赖于a.js和b.js。作为示例，这里写得非常简单。

好了，下面看看build.js的配置，为了带来实验的成就感，这里的配置非常简单，r.js github有更详细的配置，此处不详细描述了。

({
    appDir: './',
    baseUrl: 'js',
    dir: '../r6-built',
    paths: {
        jquery: 'empty:'
    },
    modules: [
        {
            name: 'b'
        },
        {
            name: 'c'
        },
    ]
})

配置完成后，b.html和c.html分别则是对b.js和c.js的引入。这个我就不用贴代码了。

运行

进入目录，命令行输入：node r.js -o build.js，'-o'是自动优化的意思。

尼玛，报错了。没找到r.js。所以，要运行任务，目录得先找对。

重来，进入 r.js 和 build.js 对应的目录（这两个js最好放在同一目录位置），并运行。

运行成功，有木有啊！太哈皮了，然后看看发生了什么。

啊啊啊~，嗯嗯~，不错呢。和r6同一级生成了一个r6-build目录，该目录下的文件名和r6下的文件名一致。但是内容肯定发生了变化。

除了css被去掉了注释之外（r.js也是解决css文件@import的工具，@import可以实现css的依赖，而r.js可以合并@import导入的文件，这点，less也可以做到，但是对于不喜欢使用less的童靴来说，r.js则是不错的选择），所有的js也被压缩了。而我们最为关注的b.js和c.js代码中，是否已经是把依赖拼合好的代码呢？

看一看吧（因为代码被压缩成了一行，为了好看，所以我使用sublime jsformat格式化了一下代码）：

b.js：

define("a", {
    color: "red"
}), require.config({
    baseUrl: "js"
}), define("b", ["a"], function(a) {
    return console.log("b.js:" + a.color), {
        color: a.color,
        width: "120px"
    }
})

c.js：

define("a", {
    color: "red"
}), require.config({
    baseUrl: "js"
}), define("b", ["a"], function(a) {
    return console.log("b.js:" + a.color), {
        color: a.color,
        width: "120px"
    }
}), require.config({
    baseUrl: "js"
}), define("c", ["b"], function(a) {
    console.log("run c.js :" + a.color + "," + a.width)
})

尼玛哟，除了正确把依赖文件代码拼合好了，连名字都起好了（define的第一个参数），省去了手动的麻烦。

再来看看r6文件下的c.html和r6-build下的c.html差别：

r6/c.html 截图：

r6-build/c.html 截图：

很明显，使用了r.js优化后，页面中只有require.js和c.js了，而c.js就是依赖拼合后的文件。

结语：

使用了r.js后，模块化的文件请求就不是问题了。当然，我给的示例很简单，打包没有发现bug吧？

哈哈哈，下一篇给出正确的build.js配置。

ps：以上仅仅是个简单的开始，grunt工具也有requirejs优化，先写到这里，我会继续完善。

更新：关于gulp的requirejs构建，请参考：https://github.com/phated/req...，会使用r.js的配置，那么这个也很容易使用了。在gulpfile中，我们只需要引入requirejs的node模块，然后把requirejs的options静态对象配置包裹到optimize方法中即可。

若有疑问，请留言联系我。
参考：

• requirejs进阶优化三

• 使用 AMD、CommonJS 及 ES Harmony 编写模块化的 JavaScript