requirejs模块化开发后的合并压缩

requireJs 项目压缩合并

必要性

 

requireJs好处无需过多介绍，为了应对日益复杂，大规模的Javascript开发，我们一般将复杂的逻辑划分成一个个小单元模块，化整为零。这个时候一个项目要引用几十个单元也是有可能的，每个单元都是一个js文件，如果上线的都是这些小的文件，每次加载页面都要向服务器发起这么多请求，将对性能造成一定影响。所以现在就需要一个工具可以将这些文件在不影响业务的前提下智能压缩合并，以减少多余的请求，于是 r.js 就诞生了。r.js的压缩工具使用 UglifyJS 或者 Closure Compiler。此外r.js需要node环境，当然也可以运行在Java环境的 Rhino。

下面就平时项目中常用的两种场景对 r.js 的使用方法进行总结 

注意：r.js 压缩所用的js文件必须得是本地的

 

 

 

场景一

 示例中的项目为单一目录，所有需要用的js都在一个目录，主文件为 main.js，现要将所有文件压缩合并到文件 built.js 中

 

1，确定有node环境

打开cmd，进入项目目录进去r.js所在的目录

输入命令：node r.js -o baseUrl=./ name=main out=../js_min/built.js

 

参数说明：

baseUrl 起始路径

name 入口文件

out 输出文件

 

合并压缩后就可以在页面上调用了

压缩之前的调用：<script data-main="js/main" src="http://s.thsi.cn/js/require.min.js"></script>

压缩之后的调用：<script data-main="js_min/built" src="http://s.thsi.cn/js/require.min.js"></script>

 

 

场景二

 

 

 

配置文件built.js 的内容：

 

{
    baseUrl: "./",                                     
    dir: "./build-file/",
    optimize: "uglify",
    modules: [{
        name: "./main"
    }],
    paths: {
        'jquery'            : '../common/jquery',
        'ClientHqData'      : '../common/ClientHqData',
        'StockCallBack'     : '../common/StockCallBack',
        'StockTable'        : '../common/StockTable',
        'hqRender'          : './hqRender',
        'swfobject'         : '../common/swfobject',
        'mmsj'              : '../common/mmsjflash',
        'setDate'           : '../common/setDatePicker',
        'clientInterface'   : '../common/clientInterface',
        'excanvas'          : '../common/excanvas',
        'flot'              : '../common/jquery.flot',
        'dpfxb'             : '../common/dpfxb',
        'subscribeSetup'    : '../common/subscribeSetup'
    }
}

 

#baseUrl  默认的情况下，所有模块都是相对于这个路径的，如果没有设置，则模块的加载是相对于 built 文件所在目录
#dir  输出目录的路径，如果不设置就默认为和 built同级的目录
#optimize  代码优化方式，常用可以设置的值：uglify（使用UglifyJS压缩代码，默认值）、none（不做合并压缩）
#modules 定义要被优化的模块数组，这里是指模块名称
#paths 整个项目的引用情况，这样的话可以不用单独写在入口文件里面了

 

命令： node r.js -o built.js
#built.js 为配置文件

 

引用（压缩合并前）：
<script data-main="/js/gnbd/main" src="http://s.thsi.cn/js/require.min.js"></script> 
引用（压缩合并后）：
<script data-main="/js/gnbd/build-file/main" src="http://s.thsi.cn/js/require.min.js"></script>