转自: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的目录结构是这样的: 

  1. // index.html 引入
  2. <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的目录结构: 

  1. //index.html 引入, entry-build.js是r.js压缩打包后生成的
  2. <script src="./require.js" data-main="./entry-build.js"></script>

build.js是r.js打包的时候需要用的模块路径声明,代码如下:

  1. ({
  2. paths: {
  3. 'jquery': './src/js/jquery',
  4. 'entry': './src/js/entry',
  5. 'math': './src/js/math',
  6. 'demo': './src/js/demo'
  7. },
  8. shim: {
  9. 'jquery': {
  10. exports: '$'
  11. }
  12. },
  13. name: 'entry',
  14. out: './src/entry-build.js'
  15. });

然后在根目录上跑以下命令即可:

  1. node r.js -o build.js

最后生成的项目结构如下,明显看到entry-build.js: 

看看页面上的请求: 

这就是我们想要的结果,请求明显减少了很多,特别是依赖很多模块的情况下,而且也对代码做了压缩。完美了吗?

gulp 对requirejs的打包和压缩

项目地址:requirejs-gulp的demo源码 
此项目是基于gulp和gulp-requirejs-optimize,而这些是必须在Node环境下才能跑。所以你首先要做的是安装好Node,然后配置好package.json,跑以下命令即可安装需要的插件:

  1. npm install -g

gulpfile的配置如下:

  1. var gulp = require('gulp');
  2. var requirejsOptimize = require('gulp-requirejs-optimize');
  3. gulp.task('rjs', function(){
  4. return gulp.src('src/js/*.js')
  5. .pipe(
  6. requirejsOptimize({
  7. optimize: 'none',
  8. mainConfigFile: 'src/config.js'
  9. }))
  10. .pipe(gulp.dest('dist/js/'));
  11. });

在根目录下跑这个gulp命令即可: 

输出的目录结构如下: 

我们再来看看页面的请求: 

同r.js打包的效果一致,请求数也是。只是大的项目一般都会需要到打包工具,所以gulp是个不错的选择!

总结

  • requirejs只是帮我们处理模块之间的依赖,以及异步去加载js,没有做到压缩和打包。请求数多到可怕
  • r.js和gulp-requirejs-optimize 是基于requirejs模块化的基础上进一步的压缩和打包成一个js,请求数大大减少

慢慢的去总结和深究技术,拒接做伸手党!

requirejs原理深究以及r.js和gulp的打包【转】的更多相关文章

  1. r.js结合gulp等于webpack(angular为例)

    本人大学时玩dojo,开始了AMD模块化的不归路,工作后一直使用requirejs,感觉非常好.但是,近来随着react的火热,webpack成为了天下无敌的模块化工具,能做模块化,合并压缩,监视等, ...

  2. requireJS中如何用r.js对js进行合并和压缩css文件

    我运行的环境是windows+node.js,首先是用npm安装requirejs(全局安装,即使用 'npm install requirejs -g',这样方便在各个目录调用),接着就是下载r.j ...

  3. requireJS的优化工具 ---- r.js

    requireJS是javascript的模块加载器,是基于AMD规范实现的. r.js是其提供的对模块进行打包和构建的一个工具 下载 r.js 创建r.js 的配置文件 build.js build ...

  4. requirejs 使用实例r.js打包

    在这里,请先看基础文章与相关技术文档: 安装: npm init npm install requirejs --save npm install jquery@1.11.1 --save 创建基本目 ...

  5. requirejs 多页面,多js 打包代码,requirejs多对多打包【收藏】

    这段代码来自 http://stackoverflow.com/questions/20583812/grunt-requirejs-optimizer-for-a-multi-app-project ...

  6. requireJs和r.js压缩工具

    上面release是执行命令 node r.js -o build.js 生成的,需要切换到目录require/tools下面,也就是 有r.js和build.js的目录,才能执行命令 代码目录如上: ...

  7. requirejs实验002. r.js合并文件. 初体验.

    requirejs的官网上有介绍如何使用r.js合并,压缩文件的.http://requirejs.org/docs/optimization.html https://github.com/jrbu ...

  8. requirejs和r.js的心得

    requirejs的GitHub:requirejs r.js的GitHub:r.js grunt-contrib-requirejs的GitHub:grunt-contrib-requirejs r ...

  9. 转:requirejs打包压缩r.js使用示例

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

随机推荐

  1. normalize.css 中文版

    ## normalize.css 中文版 normalize.css 原地址:http://necolas.github.io/normalize.css/reset 太暴力了,这个 normaliz ...

  2. 8.C#知识点:委托和事件

    知识点目录==========>传送门 首先推荐两篇大牛写的委托和事件的博客,写的超级好!看了就包你看会,想学习的朋友直接看这两篇就足以,我自己写的是算是自己学习的纪录. 传送门======== ...

  3. 使用pl/sql的文本导入器时如何设置主键自增长

    在使用文本导入器批量导入数据时,如果需要设置主键自增长,可以先创建一个序列: create sequence SEQ_Userinf start with 1 increment by 1nomaxv ...

  4. 【Mysql】可视化工具

    一.navicat 破解方法:http://www.jianshu.com/p/b1f9194e1e31 二. MySQL Workbench(GUI TOOL)一款专为MySQL设计的ER/数据库建 ...

  5. Spring Boot项目使用maven-assembly-plugin根据不同环境打包成tar.gz或者zip

    spring-boot-assembly 在spring boot项目中使用maven profiles和maven assembly插件根据不同环境打包成tar.gz或者zip 将spring bo ...

  6. Magic Number (zoj3622)

    Magic Number (zoj3622) Time Limit : 4000/2000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Oth ...

  7. mongodb远程连接访问

    随着云计算,云服务的不断发展演进,数据库的管理及维护方式也在转变,传统基于C/S客户端工具管理的方式,已经无法满足实际需要. TreeSoft数据库管理系统,采用web方式,对mongoDB,MySQ ...

  8. C#将图片存放到SQL SERVER数据库中的方法

    本文实例讲述了C#将图片存放到SQL SERVER数据库中的方法.分享给大家供大家参考.具体如下: 第一步: ? 1 2 3 4 5 6 7 8 9 10 //获取当前选择的图片 this.pictu ...

  9. 01-Javascript简介(了解)

    [转]01-Javascript简介(了解) Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用 ...

  10. 网络编程协议(TCP和UDP协议,黏包问题)以及socketserver模块

    网络编程协议 1.osi七层模型 应用层  表示层  会话层  传输层  网络层  数据链路层  物理层 2.套接字 socket 有两类,一种基于文件类型,一种基于网络类型 3.Tcp和udp协议 ...