为了应对日益复杂，大规模的JavaScript开发。我们化整为零，化繁为简。将复杂的逻辑划分一个个小单元，各个击破。这时一个项目可能会有几十个甚至上百个JS文件，每个文件为一个模块单元。如果上线时都是这些小文件，那将对性能造成一定影响。

RequireJS提供了一个打包压缩工具r.js来对模块进行合并压缩。r.js非常强大，不但可以压缩js，css，甚至可以对整个项目进行打包。

r.js的压缩工具使用UglifyJS或Closure Compiler。默认使用UglifyJS（jQuery也是使用它压缩）。此外r.js需要node.js环境，当然它也可以运行在Java环境中如Rhino。

这篇以一个简单的示例来感受下r.js，创建的目录如下

和入门之三目录结构一样，写了三个模块cache，event，selector。这三个模块的代码就不在贴了。main.js也未做修改，实现的功能仍然是为页面上的所有段落P元素添加个点击事件，点击后弹出P的innerHTML。唯一的区别是目录中多了个r.js。

index.html做了修改，如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<html>
    <head>
        <title>requirejs进阶（一）</title>
        <meta charset="utf-8"/>
        <style type="text/css">
            p {
                background: #999;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <p>p1</p><p>p2</p><p>p3</p><p>p4</p><p>p5</p>
        <script data-main="built" src="require.js"></script>
    </body>
</html>

注意，data-main改为了“built”，上一篇的是“main”。我们将使用r.js把js目录下的cache.js，event.js，selector.js，main.js合并压缩后写到r4目录中。

好，让我们开始合并压缩吧。

1，打开windows命令窗口，cd到r4目录中

2，输入命令

node r.js -o baseUrl=js name=main out=built.js

命令行信息可以看到已经将各个js文件合并成功了。这时回到r4目录会发现多了一个built.js文件。

好了，合并压缩过程完成了。

把目录r4放到apache或其它web服务器上，访问index.html。网络请求如下

可以看到除了require.js，就只有built.js了。大大减少了JS文件的http请求。这时点击页面上各个P元素，会弹出对应的innerHTML

这说明功能完损无缺。

下面对命令行做个简单解释。
node r.js -o baseUrl=js name=main out=built.js

-o         表示优化，该参数是固定的，必选。
baseUrl  指存放模块的根目录，这里是r4/js，因为cd到r4中了，只需设置为js。可选，如果没有设置将从r4中查找main.js。
name     模块的入口文件，这里设置成“main”，那么r.js会从baseUrl+main去查找。这里实际是r4/js/main.js。r.js会分析main.js，找出其所依赖的所有其它模块，然后合并压缩。
out        指合并压缩后输出的文件路径，这里直接是built.js，那么将输出到根目录r4下。

好了，再介绍两个参数

1，excludeShallow 合并时将排除该文件

node r.js -o baseUrl=js name=main out=built.js excludeShallow=selector

可以看到输出信息中不再包括selector.js。这时运行index.html页面，会发现selector.js被单独请求下来了。

2，optimize (none/uglify/closure)  指定是否压缩，默认为uglify
不传该参数时r.js默认以UglifyJS压缩。设置为none则不会压缩，仅合并，这在开发阶段是很用用的。
node r.js -o baseUrl=js name=main out=built.js optimize=none

这时生成的built.js是没有压缩的。

总结：
这篇演示了采用模块开发后上线前的一个小示例：把所有模块文件合并为一个文件。

先下载r.js放到开发目录中，然后使用命令行来合并压缩。其中演示了命令行参数-o、baseUrl、name、out及excludeShallow、optimize的使用。-o、name、out是必选的，其它为可选。

r4.zip

RequireJS进阶（一） 转的更多相关文章

  1. RequireJS进阶（一）

    为了应对日益复杂,大规模的JavaScript开发.我们化整为零,化繁为简.将复杂的逻辑划分一个个小单元,各个击破.这时一个项目可能会有几十个甚至上百个JS文件,每个文件为一个模块单元.如果上线时都是 ...

  2. RequireJS进阶-模块的优化及配置的详解

    概述 关于RequireJS已经有很多文章介绍过了.这个工具可以将你的JavaScript代码轻易的分割成苦干个模块(module)并且保持你的代码模块化与易维护性.这样,你将获得一些具有互相依赖关系 ...

  3. RequireJS进阶（三） 转

    进阶的前面两篇讲述了r.js如何通过命令行把所有的模块压缩为一个js文件或把所有的css压缩为一个css文件.其中包括一些压缩配置参数的使用. 但以上两种方式有几个问题 1.通过命令手动配置压缩选项显 ...

  4. RequireJS进阶（三）

    进阶的前面两篇讲述了r.js如何通过命令行把所有的模块压缩为一个js文件或把所有的css压缩为一个css文件.其中包括一些压缩配置参数的使用. 但以上两种方式有几个问题 1.通过命令手动配置压缩选项显 ...

  5. RequireJS进阶（二） 转

    这一篇来认识下打包工具的paths参数,在入门一中就介绍了require.config方法的paths参数.用来配置jquery模块的文件名(jQuery作为AMD模块时id为“jquery”,但文件 ...

  6. RequireJS进阶（二）

    这一篇来认识下打包工具的paths参数,在入门一中就介绍了require.config方法的paths参数.用来配置jquery模块的文件名(jQuery作为AMD模块时id为“jquery”,但文件 ...

  7. RequireJS入门与进阶

    RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...

  8. 转:requirejs打包压缩r.js使用示例

    为了应对日益复杂,大规模的JavaScript开发.我们化整为零,化繁为简.将复杂的逻辑划分一个个小单元,各个击破.这时一个项目可能会有几十个甚至上百个JS文件,每个文件为一个模块单元.如果上线时都是 ...

  9. github上最全的资源教程-前端涉及的所有知识体系

    前面分享了前端入门资源汇总,今天分享下前端所有的知识体系. 个人站长对个人综合素质要求还是比较高的,要想打造多拉斯自媒体网站,不花点心血是很难成功的,学习前端是必不可少的一个环节, 当然你不一定要成为 ...

随机推荐

  1. Win7 _Object_header 中的 TypeIndex

    Win7 比较 xp下ObjectHeader中的内容有所变化,xp直接在OBJECT_HEADER里保存了POBJECT_TYPE指针,而Win7中把所有的对象类型放在了一个表里,这个表叫做ObTy ...

  2. Gradle Goodness: Rename Ant Task Names When Importing Ant Build File

    Migrating from Ant to Gradle is very easy with the importBuild method from AntBuilder. We only have ...

  3. 【Apache运维基础(4)】Apache的Rewrite攻略（1）

    简述 Rewirte主要的功能就是实现URL的跳转,它的正则表达式是基于Perl语言.可基于服务器级的(httpd.conf)和目录级的 (.htaccess)两种方式.如果要想用到rewrite模块 ...

  4. mq_close

    NAME mq_close - 关闭一个消息队列 (REALTIME) SYNOPSIS #include <mqueue.h>int mq_close(mqd_t mqdes) DESC ...

  5. QTreeView使用点点滴滴

    QTreeView比较复杂,在这里记下所有用到的操作: ------------------------------------------------------------------------ ...

  6. MMU和TLB

    MMU和TLB 记得那家芯片公司给我电话面试的时候,别的都还好,可是他问我什么是MMU,我只能干瞪眼.今天在看<Linux内核源码(陈莉君)>的时候,无意中看到第二章内存地址这一节,学习如 ...

  7. Mysql笔记——DCL

    DCL数据库控制语言不同于程序设计语言,SQL语言(结构化查询语言)的组成部分包括了DCL数据库控制语言.   =============== 1.创建用户 语法:CREATE USER 用户名@地址 ...

  8. MyBatis实现SaveOrUpdate

    这篇文章主要讲如何通过xml方式实现SaveOrUpdate,但是仍然建议在Service中实现. 例子 <insert id="saveOrUpdate" > < ...

  9. slot signal机制

    有一个比较 经典的实现:http://sigslot.sourceforge.net/很精简的 signal slot的实现,跨平台.webrtc项目在用,我在自己项目里也用了.这个源码有2000多行 ...

  10. 自动化mobile测试

    MicroFocus推出手机自动化测试工具 - Silk Mobilehttp://automationqa.com/forum.php?mod=viewthread&tid=1068& ...