requirejs原理深究以及r.js和gulp的打包【转】
转自:http://blog.csdn.net/why_fly/article/details/75088378
requirejs原理
requirejs的用法和原理分析:https://github.com/HRFE/blog/issues/10
从进公司到现在,我们前端组一直秉承的是模块化开发,PC 页面我们用的是requirejs对模块化代码进行管理,H5用的是webpack。只是原先都是做伸手党,至于其中的原理没有深究过,今天趁着有时间,就好好来扒一扒requirejs,下次抽空再来深究webpack。
requirejs做的只是:
- 实现js文件的异步加载,避免网页失去响应
- 管理模块之间的依赖,便于代码的编写和维护
简单来讲,传统的做法通过script方式引入不同的js,我们必须得知道各个js之间的依赖关系,谁在前谁在后。而使用了requirejs以后,依赖关系就不需要担心了,只需要愉快的写模块即可。
requirejs初探
项目地址:requirejs的demo源码
Demo的目录结构是这样的:
// index.html 引入
<script src="./require.js" data-main="./js/entry.js"></script>
最后页面上js的请求:
可以看出,requirejs只是帮你处理模块的依赖关系,并不会帮你做任何的打包和压缩。这样相对于传统的引入方式jquery.js、entry.js、math.js、demo.js,我们还多了请求requirejs。这当然是不可接受的。所以聪明的开发者想到了将所有的模块打包成一个js,那么我们只需求请求requirejs和entry.js即可。
r.js对requirejs的压缩和打包
项目地址:require-rjs的demo源码
r.js是requirejs的优化工具,可以实现前端文件的压缩和合并,在requirejs异步加载的基础上进一步提供前端的优化,减小前端文件大小,减少对服务器的文件请求。下载r.js文件(点我下载),将其放到你项目根目录,当然这些操作是基于Node,所以必须先安装Nodejs。
Demo的目录结构:
//index.html 引入, entry-build.js是r.js压缩打包后生成的
<script src="./require.js" data-main="./entry-build.js"></script>
build.js是r.js打包的时候需要用的模块路径声明,代码如下:
({
paths: {
'jquery': './src/js/jquery',
'entry': './src/js/entry',
'math': './src/js/math',
'demo': './src/js/demo'
},
shim: {
'jquery': {
exports: '$'
}
},
name: 'entry',
out: './src/entry-build.js'
});
然后在根目录上跑以下命令即可:
node r.js -o build.js
最后生成的项目结构如下,明显看到entry-build.js:
看看页面上的请求:
这就是我们想要的结果,请求明显减少了很多,特别是依赖很多模块的情况下,而且也对代码做了压缩。完美了吗?
gulp 对requirejs的打包和压缩
项目地址:requirejs-gulp的demo源码
此项目是基于gulp和gulp-requirejs-optimize,而这些是必须在Node环境下才能跑。所以你首先要做的是安装好Node,然后配置好package.json,跑以下命令即可安装需要的插件:
npm install -g
gulpfile的配置如下:
var gulp = require('gulp');
var requirejsOptimize = require('gulp-requirejs-optimize');
gulp.task('rjs', function(){
return gulp.src('src/js/*.js')
.pipe(
requirejsOptimize({
optimize: 'none',
mainConfigFile: 'src/config.js'
}))
.pipe(gulp.dest('dist/js/'));
});
在根目录下跑这个gulp命令即可:
输出的目录结构如下:
我们再来看看页面的请求:
同r.js打包的效果一致,请求数也是。只是大的项目一般都会需要到打包工具,所以gulp是个不错的选择!
总结
- requirejs只是帮我们处理模块之间的依赖,以及异步去加载js,没有做到压缩和打包。请求数多到可怕
- r.js和gulp-requirejs-optimize 是基于requirejs模块化的基础上进一步的压缩和打包成一个js,请求数大大减少
慢慢的去总结和深究技术,拒接做伸手党!
requirejs原理深究以及r.js和gulp的打包【转】的更多相关文章
- r.js结合gulp等于webpack(angular为例)
本人大学时玩dojo,开始了AMD模块化的不归路,工作后一直使用requirejs,感觉非常好.但是,近来随着react的火热,webpack成为了天下无敌的模块化工具,能做模块化,合并压缩,监视等, ...
- requireJS中如何用r.js对js进行合并和压缩css文件
我运行的环境是windows+node.js,首先是用npm安装requirejs(全局安装,即使用 'npm install requirejs -g',这样方便在各个目录调用),接着就是下载r.j ...
- requireJS的优化工具 ---- r.js
requireJS是javascript的模块加载器,是基于AMD规范实现的. r.js是其提供的对模块进行打包和构建的一个工具 下载 r.js 创建r.js 的配置文件 build.js build ...
- requirejs 使用实例r.js打包
在这里,请先看基础文章与相关技术文档: 安装: npm init npm install requirejs --save npm install jquery@1.11.1 --save 创建基本目 ...
- requirejs 多页面,多js 打包代码,requirejs多对多打包【收藏】
这段代码来自 http://stackoverflow.com/questions/20583812/grunt-requirejs-optimizer-for-a-multi-app-project ...
- requireJs和r.js压缩工具
上面release是执行命令 node r.js -o build.js 生成的,需要切换到目录require/tools下面,也就是 有r.js和build.js的目录,才能执行命令 代码目录如上: ...
- requirejs实验002. r.js合并文件. 初体验.
requirejs的官网上有介绍如何使用r.js合并,压缩文件的.http://requirejs.org/docs/optimization.html https://github.com/jrbu ...
- requirejs和r.js的心得
requirejs的GitHub:requirejs r.js的GitHub:r.js grunt-contrib-requirejs的GitHub:grunt-contrib-requirejs r ...
- 转:requirejs打包压缩r.js使用示例
为了应对日益复杂,大规模的JavaScript开发.我们化整为零,化繁为简.将复杂的逻辑划分一个个小单元,各个击破.这时一个项目可能会有几十个甚至上百个JS文件,每个文件为一个模块单元.如果上线时都是 ...
随机推荐
- normalize.css 中文版
## normalize.css 中文版 normalize.css 原地址:http://necolas.github.io/normalize.css/reset 太暴力了,这个 normaliz ...
- 8.C#知识点:委托和事件
知识点目录==========>传送门 首先推荐两篇大牛写的委托和事件的博客,写的超级好!看了就包你看会,想学习的朋友直接看这两篇就足以,我自己写的是算是自己学习的纪录. 传送门======== ...
- 使用pl/sql的文本导入器时如何设置主键自增长
在使用文本导入器批量导入数据时,如果需要设置主键自增长,可以先创建一个序列: create sequence SEQ_Userinf start with 1 increment by 1nomaxv ...
- 【Mysql】可视化工具
一.navicat 破解方法:http://www.jianshu.com/p/b1f9194e1e31 二. MySQL Workbench(GUI TOOL)一款专为MySQL设计的ER/数据库建 ...
- Spring Boot项目使用maven-assembly-plugin根据不同环境打包成tar.gz或者zip
spring-boot-assembly 在spring boot项目中使用maven profiles和maven assembly插件根据不同环境打包成tar.gz或者zip 将spring bo ...
- Magic Number (zoj3622)
Magic Number (zoj3622) Time Limit : 4000/2000ms (Java/Other) Memory Limit : 65536/32768K (Java/Oth ...
- mongodb远程连接访问
随着云计算,云服务的不断发展演进,数据库的管理及维护方式也在转变,传统基于C/S客户端工具管理的方式,已经无法满足实际需要. TreeSoft数据库管理系统,采用web方式,对mongoDB,MySQ ...
- C#将图片存放到SQL SERVER数据库中的方法
本文实例讲述了C#将图片存放到SQL SERVER数据库中的方法.分享给大家供大家参考.具体如下: 第一步: ? 1 2 3 4 5 6 7 8 9 10 //获取当前选择的图片 this.pictu ...
- 01-Javascript简介(了解)
[转]01-Javascript简介(了解) Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用 ...
- 网络编程协议(TCP和UDP协议,黏包问题)以及socketserver模块
网络编程协议 1.osi七层模型 应用层 表示层 会话层 传输层 网络层 数据链路层 物理层 2.套接字 socket 有两类,一种基于文件类型,一种基于网络类型 3.Tcp和udp协议 ...