前端优化:RequireJS Optimizer 的使用和配置方法(一)
来源:互联网 发布:ppt mac版 编辑:程序博客网 时间:2024/06/06 01:07
前言
前端javascript
文件越来越多了,依赖加载,文件合并的问题也就随之出现。好在有基于AMD
规范的requirejs
和国产基于CMD
规范的seajs
可以管理依赖。但是,使用这样的js来管理js模块的依赖,就会导致页面js文件请求就会变多,为了减少文件请求,一般的文件拼合工具就不起作用了,比如grunt
的concat
工具。
好在requirejs
有r.js
来解决这个问题。而且使用也简单,容易上手。
PS:之所以没选择优秀的seajs
,是因为spm
打包工具实在是难以上手。
开始上手
在开始之前,我们假定你已经掌握了requirejs
的使用,若是不懂,可以看看阮一峰老师的相关文章,写得很好。另外,你需要有node
环境和git
,那么这些条件都准备充足了,神马都好办了。
尽管官方英文文档也有API,但是,写得比较啰嗦,在命令行敲配置,实在是很二逼的做法啊!想不通为何不直接写使用build.js
来进行任务配置。
好,先看看我自己建立的测试文档,目录如下图:
目录中,r.js
和require.js
两者缺一不可。
abc 代码如下:
a.js:
define({ color:'red'});b.js:
require.config({ baseUrl: 'js'});define(['a'], function(a) { console.log('b.js:' + a.color); return { color: a.color, width: '120px' };});c.js:
require.config({ baseUrl:'js'});define(['b'],function(b){ console.log('run c.js :'+b.color+','+b.width);});
从代码可以看出,b.js
依赖于a.js
,c.js
依赖于a.js
和b.js
。作为示例,这里写得非常简单。
好了,下面看看build.js
的配置,为了带来实验的成就感,这里的配置非常简单,r.js
github
有更详细的配置,此处不详细描述了。
({ appDir: './', baseUrl: 'js', dir: '../r6-built', paths: { jquery: 'empty:' }, modules: [ { name: 'b' }, { name: 'c' }, ]})
配置完成后,b.html
和c.html
分别则是对b.js
和c.js
的引入。这个我就不用贴代码了。
运行
进入目录,命令行输入:node r.js -o build.js
,'-o'是自动优化的意思。
尼玛,报错了。没找到r.js
。所以,要运行任务,目录得先找对。
重来,进入 r.js
和 build.js
对应的目录(这两个js最好放在同一目录位置),并运行。
运行成功,有木有啊!太哈皮了,然后看看发生了什么。
啊啊啊~~~,嗯嗯~~~,不错呢。和r6
同一级生成了一个r6-build
目录,该目录下的文件名和r6
下的文件名一致。但是内容肯定发生了变化。
除了css
被去掉了注释之外(r.js
也是解决css
文件@import
的工具,@import
可以实现css
的依赖,而r.js
可以合并@import
导入的文件,这点,less
也可以做到,但是对于不喜欢使用less
的童靴来说,r.js
则是不错的选择),所有的js
也被压缩了。而我们最为关注的b.js
和c.js
代码中,是否已经是把依赖拼合好的代码呢?
看一看吧(因为代码被压缩成了一行,为了好看,所以我使用sublime jsformat
格式化了一下代码):
b.js:
define("a", { color: "red"}), require.config({ baseUrl: "js"}), define("b", ["a"], function(a) { return console.log("b.js:" + a.color), { color: a.color, width: "120px" }})c.js:
define("a", { color: "red"}), require.config({ baseUrl: "js"}), define("b", ["a"], function(a) { return console.log("b.js:" + a.color), { color: a.color, width: "120px" }}), require.config({ baseUrl: "js"}), define("c", ["b"], function(a) { console.log("run c.js :" + a.color + "," + a.width)})
尼玛哟,除了正确把依赖文件代码拼合好了,连名字都起好了(define的第一个参数),省去了手动的麻烦。
再来看看r6文件下的c.html和r6-build下的c.html差别:
r6/c.html 截图:
r6-build/c.html 截图:
很明显,使用了r.js
优化后,页面中只有require.js
和c.js
了,而c.js
就是依赖拼合后的文件。
结语:
使用了r.js
后,模块化的文件请求就不是问题了。当然,我给的示例很简单,打包没有发现bug吧?
哈哈哈,下一篇给出正确的build.js
配置。
ps:以上仅仅是个简单的开始,grunt
工具也有requirejs
优化,先写到这里,我会继续完善。
更新:关于gulp
的requirejs
构建,请参考:https://github.com/phated/requirejs-example-gulpfile,会使用r.js的配置,那么这个也很容易使用了。在gulpfile
中,我们只需要引入requirejs
的node模块,然后把requirejs
的options静态对象配置包裹到optimize
方法中即可。
若有疑问,请留言联系我。
参考:
- requirejs进阶优化三
- 使用 AMD、CommonJS 及 ES Harmony 编写模块化的 JavaScript
转自:http://segmentfault.com/a/1190000000394849
- 前端优化:RequireJS Optimizer 的使用和配置方法(一)
- 前端优化:RequireJS Optimizer 的使用和配置方法(二)
- RequireJS Optimizer 的使用和配置方法
- RequireJS Optimizer 的使用和配置
- 使用RequireJS优化Web应用前端
- 使用RequireJS优化Web应用前端
- 使用RequireJS优化Web应用前端
- 使用 RequireJS 优化 Web 应用前端
- 使用 RequireJS 优化 Web 应用前端
- 使用RequireJS优化Web应用前端
- 使用 RequireJS 优化 Web 应用前端
- 使用RequireJS优化Web应用前端
- 使用 RequireJS 优化 Web 应用前端
- 使用 RequireJS 优化 Web 应用前端
- 支持seaJs和requireJs的前端模块开发方案(一):方案介绍
- 支持seaJs和requireJs的前端模块开发方案(三):加载器全局配置alias.js
- AMD和RequireJS初识----优化Web应用前端
- zend optimizer的安装和配置
- MFC,VC++中,CView类意外消失
- Qt入门之HelloWorld
- Mysql插入空间数据
- Selenium IDE录制登录操作,导出Java / Junit 4 / WebDriver
- JavaScript权威指南_118_第15章_脚本化文档_15.2-选取文档元素-document.all
- 前端优化:RequireJS Optimizer 的使用和配置方法(一)
- MySQL学习笔记(一):添加外键
- python2与python3的区别
- ps学习笔记 (快捷键)
- 不知道新三字经是啥?男默女泪的扫盲科普帖来了
- SQL 新增欄位
- 安装maven3.3.3出现Unsupported major.minor version 51.0问题
- Oracle诉讼Google缘何正确
- 欢迎使用CSDN-markdown编辑器