前言

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

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

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

开始上手

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

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

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

前端优化:RequireJS Optimizer 的使用和配置方法(一)-LMLPHP

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

abc 代码如下:

a.js:

  1. define({
  2.     color:'red' });

b.js:

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

c.js:


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

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

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


  1. ({
  2.     appDir: './',
  3.     baseUrl: 'js',
  4.     dir: '../r6-built',
  5.     paths: {
  6.         jquery: 'empty:' },
  7.     modules: [
  8.         {
  9.             name: 'b' },
  10.         {
  11.             name: 'c' },
  12.     ]
  13. })

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

运行

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

前端优化:RequireJS Optimizer 的使用和配置方法(一)-LMLPHP

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

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

前端优化:RequireJS Optimizer 的使用和配置方法(一)-LMLPHP

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

前端优化:RequireJS Optimizer 的使用和配置方法(一)-LMLPHP

啊啊啊~~~,嗯嗯~~~,不错呢。和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:


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

c.js:


  1. define("a", {
  2.     color: "red" }), require.config({
  3.     baseUrl: "js" }), define("b", ["a"], function(a) { return console.log("b.js:" + a.color), {
  4.         color: a.color,
  5.         width: "120px" }
  6. }), require.config({
  7.     baseUrl: "js" }), define("c", ["b"], function(a) { console.log("run c.js :" + a.color + "," + a.width)
  8. })

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

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

r6/c.html 截图:

前端优化:RequireJS Optimizer 的使用和配置方法(一)-LMLPHP

r6-build/c.html 截图:

前端优化:RequireJS Optimizer 的使用和配置方法(一)-LMLPHP

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

10-03 09:20