A-A+

requirejs压缩工具r.js 使用介绍

2017年05月03日 javascript 暂无评论 阅读 18 views 次

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

 

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

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

 

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

RequireJS进阶 <wbr/>r.js <wbr>合并压缩

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

 

index.html做了修改,如下

 

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

 

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

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

RequireJS进阶 <wbr/>r.js <wbr>合并压缩

 

2,输入命令

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

RequireJS进阶 <wbr/>r.js <wbr>合并压缩

 

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

RequireJS进阶 <wbr/>r.js <wbr>合并压缩

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

 

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

RequireJS进阶 <wbr/>r.js <wbr>合并压缩

 

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

RequireJS进阶 <wbr/>r.js <wbr>合并压缩

这说明功能完损无缺。

 

下面对命令行做个简单解释。
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

RequireJS进阶 <wbr/>r.js <wbr>合并压缩

 

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

RequireJS进阶 <wbr/>r.js <wbr>合并压缩

 

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

RequireJS进阶 <wbr/>r.js <wbr>合并压缩

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

 

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

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

打赏作者
如果文章对您有所帮助请打赏支持本站发展。

您的支持将鼓励我们继续创作!

[微信] 扫描二维码打赏

[支付宝] 扫描二维码打赏

标签:

给我留言

您必须 登录 才能发表留言!

Copyright © 大一网 保留所有权利.   Theme  Ality

用户登录 ⁄ 注册

分享到: