requirejs原理深究以及r.js和gulp的打包
来源:互联网 发布:视频短片软件 编辑:程序博客网 时间:2024/06/05 23:00
requirejs原理
从进公司到现在,我们前端组一直秉承的是模块化开发,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原理
- requirejs原理深究以及r.js和gulp的打包
- 用 requirejs 的 R.js 打包css + js
- requireJS的优化工具 ---- r.js
- 十六、深究熵的概念和公式以及最大熵原理
- gulp打包的gulpfile.js,自用~~
- requirejs压缩工具r.js的build.js配置详解
- RequireJs按需要加载angular模块和依赖,并且用r.js压缩打包js和css文件实现加载优化(图文)。
- 使用requireJS加载不符合AMD规范的js文件:shim的使用方式和实现原理
- 使用requireJS加载不符合AMD规范的js文件:shim的使用方式和实现原理
- 使用requireJS加载不符合AMD规范的js文件:shim的使用方式和实现原理
- 使用requireJS加载不符合AMD规范的js文件:shim的使用方式和实现原理
- 写 gulp requirejs 编译流程的笔记
- Python函数参数默认值的陷阱和原理深究
- Python函数参数默认值的陷阱和原理深究
- Python函数参数默认值的陷阱和原理深究
- 【转载】Python函数参数默认值的陷阱和原理深究
- requirejs优化:使用r.js压缩文件
- seajs和requiejs的区别,和用gulp打包方法
- Problem D: Jug Hard
- ThinkPad L460笔记本如何换装win7系统?
- AndroidStudio提交新项目到git@osc开源中国
- intellij idea使用maven本地仓库及修改本地仓库路径
- quartus仿真提示: Can't launch the ModelSim-Altera software
- requirejs原理深究以及r.js和gulp的打包
- composer入门
- JPush极光推送会有时绑定不了registrationID的解决方法
- 翻译《有关编程、重构及其他的终极问题?》——28.如果你可以使用简单的函数就不要使用宏
- java-day03-reflect-Field
- OC语言学习04-数组
- vue-router实现路由懒加载
- 怎么解决TortoiseGit每次Pull或者Push都需要输用户名密码的问题
- Python读取目录下子文件