为了应对日益复杂,大规模的 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 <!doctype html> 2 <html> 3 <head><title>requirejs 进阶(一)</title> 4 <meta charset="utf-8"/> 5 <style type="text/css"> p { 6 background: #999; 7 width: 200px; 8 } </style> 9 </head> 10 <body> 11 <p>p1</p> 12 <p>p2</p> 13 <p>p3</p> 14 <p>p4</p> 15 <p>p5</p> 16 <script data-main="built" src="require.js"></script> 17 </body> 18 </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 out 模块的入口文件,这里设置成“main”,那么 r.js 会从 baseUrl+main 去查找。
这 指合并压缩后输出的文件路径,这里直接是 built.js,
那么将输出到根目录 r4 下。
里实际是 r4/js/main.js。 r.js 会分析 main.js, 找出其所依赖的所有其它模块, 然后合并压缩。
好了,再介绍两个参数
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 是必选的, 其它为可选。