7.RequireJS的r.js文件进行压缩

为了应对日益复杂，大规模的 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 阅读(266) 评论(0) 收藏举报

7.RequireJS的r.js文件 进行压缩

7.RequireJS的r.js文件进行压缩