为了应对日益复杂，大规模的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做了修改，如下

<!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是必选的，其它为可选。

下载

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. Oracle 11g详细安装配置教程

    最近开始学习Oracle数据库了,根据我的理解Oracle数据库是一种强大.复杂.高性能的数据库,而且价格不菲,使用都是中大型企业,土豪专用.学习一种数据库的入门工作就是先安装这种数据库,鉴于大批道友 ...

  2. html行内元素 和 块状元素 总结

    块状元素 address - 地址blockquote - 块引用center - 举中对齐块dir - 目录列表div - 常用块级容易,也是CSS layout的主要标签dl - 定义列表fiel ...

  3. Android ScrollView 嵌套 ListView、 ListView 嵌套ScrollView Scroll事件冲突解决办法

    本人菜鸟一名,最近工作了,开始学习Android. 最近在做项目的时候,UX给了个design,大概就是下拉刷新的ListView中嵌套了ScrollView,而且还要在ScrollView中添加动画 ...

  4. 搭建ngrok服务器（ubuntu 14）-- 微信 80端口和IPC备案限制解决方案

    概述: ngrok其实这东西,我也不是很懂,所以也直接跟大家说,这就是个类似花生壳的东西. 简单来说,它就好像把我们内网自己使用的电脑和服务器用vpn连接起来,然后你的电脑就可以从互联网来访问了,有个 ...

  5. [转]PageRank算法

    原文引自: 原文引自: http://blog.csdn.net/hguisu/article/details/7996185 感谢 1. PageRank算法概述 PageRank,即网页排名,又称 ...

  6. 《Linux内核分析》 week5作业-system call中断处理过程

    一.使用gdb跟踪分析一个系统调用内核函数 1.在test.c文件中添加time函数与采用c语言内嵌汇编的time函数.具体实现请看下图. 2.然后在main函数中添加MenuConfig函数,进行注 ...

  7. 多线程11-Semaphore信号灯

    1.概念 Semaphore可以维护当前访问自身的线程个数,并提供了同步机制.使用Semaphore可以控制同时访问资源的线程个数,例如,实现一个文件允许的并发访问数 2.案例 package org ...

  8. part3

    我就不刁旭概念什么的问题了哈~直接进入工作中所通用的一些有关object的方法和属性 1).for/in 属性的遍历~他遍历的对象没有特定的顺序,而且只能枚举出所有用户自定义的属性,不能枚举出某些预定 ...

  9. asp.net 字符帮助类 类型转换类

    /// <summary> /// 字符帮助类 /// </summary> public class StringHelper { private static readon ...

  10. Nt内核函数原型and中文

    NtLoadDriver 服务控制管理器加载设备驱动. NtUnloadDriver 服务控制管理器支持卸载指定的驱动程序. NtRegisterNewDevice 加载新驱动文件. NtQueryI ...