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

requirejs原理

从进公司到现在,我们前端组一直秉承的是模块化开发,PC 页面我们用的是requirejs对模块化代码进行管理,H5用的是webpack。只是原先都是做伸手党,至于其中的原理没有深究过,今天趁着有时间,就好好来扒一扒requirejs,下次抽空再来深究webpack。

requirejs做的只是:

  • 实现js文件的异步加载,避免网页失去响应
  • 管理模块之间的依赖,便于代码的编写和维护

简单来讲,传统的做法通过script方式引入不同的js,我们必须得知道各个js之间的依赖关系,谁在前谁在后。而使用了requirejs以后,依赖关系就不需要担心了,只需要愉快的写模块即可。

requirejs初探

项目地址:requirejs的demo源码

Demo的目录结构是这样的:
requirejs原理深究以及r.js和gulp的打包_第1张图片

// index.html 引入
<script src="./require.js" data-main="./js/entry.js">script>

最后页面上js的请求:
requirejs原理深究以及r.js和gulp的打包_第2张图片

可以看出,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的目录结构:
requirejs原理深究以及r.js和gulp的打包_第3张图片

//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:
requirejs原理深究以及r.js和gulp的打包_第4张图片

看看页面上的请求:
这里写图片描述
这就是我们想要的结果,请求明显减少了很多,特别是依赖很多模块的情况下,而且也对代码做了压缩。完美了吗?

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命令即可:
这里写图片描述

输出的目录结构如下:
requirejs原理深究以及r.js和gulp的打包_第5张图片

我们再来看看页面的请求:
这里写图片描述

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

总结

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

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

参考链接:requirejs原理

你可能感兴趣的:(前端挖坑)