requirejs原理深究以及r.js和gulp的打包

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原理