为了应对日益复杂,大规模的 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 是必选的, 其它为可选。

posted on 2018-01-04 13:54  Sharpest  阅读(254)  评论(0编辑  收藏  举报