RequireJS优化项目

之前介绍了使用requireJS如何去实现代码模块化，今天再来讲讲在requireJS项目中如何合并和压缩js和css文件。

这里有两种方法：一种手动创建build.js；另一种使用CMD命令直接压缩。

这两种方法有个必要条件：必需在项目中引入r.js文件，下载地址：https://github.com/requirejs/r.js

下载好后，复制到项目目录下。

手动创建build.js：

({

// app顶级目录，非必选项。如果指定值，baseUrl则会以此为相对路径

appDir: './'

// 模块根目录。默认情况下所有模块资源都相对此目录。

// 若该值未指定，模块则相对build文件所在目录。

// 若appDir值已指定，模块根目录baseUrl则相对appDir。

,baseUrl: './'

// 指定输出目录，若值未指定，则相对 build 文件所在目录

,dir: './dist'

//一个包含多个对象的数组。每个对象代表一个将被优化的模块（module）。

,modules: [

{

name: 'demo1'

}

,{

name: 'demo2'

}

]

// 不优化某些文件

,fileExclusionRegExp: /^(r|build)\.js$/

// RequireJS Optimizer会自动优化应用程序下的CSS文件 。CSS 优化方式，目前支持以下几种：

// none: 不压缩，仅合并

// standard: 标准压缩，移除注释、换行，以及可能导致 IE 解析出错的代码

// standard.keepLines: 除标准压缩外，保留换行

// standard.keepComments: 除标准压缩外，保留注释 (r.js 1.0.8+)

// standard.keepComments.keepLines: 除标准压缩外，保留注释和换行 (r.js 1.0.8+)

,optimizeCss: 'standard'

//是否移除已经合并的文件

,removeCombined: true

// 设置模块别名

// RequireJS 2.0 中可以配置数组，顺序映射，当前面模块资源未成功加载时可顺序加载后续资源

,paths: {

a:'demo1'

,b:'demo2'

,c:'demo3'

}

//配置模块依赖。为那些没有使用define()声名依赖关系及设置模块值的模块，配置依赖关系与“浏览器全局”出口的脚本

,shim:{

c:{

exports: 'yjs'

}

}

})

然后，通过CMD执行node命令执行build.js :node r.js -o build.js

这样会创建出一个新的文件夹，你会发现里面的代码都是压缩过的。

通过CMD使用node命令直接创建build.js文件：

node r.js -o baseUrl=./ name=index out=build.js

-o：表示优化，该参数是固定的，必选。

baseUrl：指存模块的根目录，可选。

name：模块的入口文件，这里是app,那么r.js会从baseUrl+name去查找app.js，然后找出所有依赖的模块，然后进行合并与压缩。

out:指合并压缩后输出的文件路径，这里是直接输出在根目录下build.js 我们也可以输出到其他目录下 比如js/app 目录下，也可以的。

运行命令后你会发现目录下多出了一个build.js文件，然后在你的html文件中引入build.js文件：

即可，打开浏览器调试页面，你会发现请求的文件数变少了，通过这个方法减少浏览器http的请求次数