requirejs的Optimizer 对require项目的合并与压缩
前言
我博客前面关于requirejs的文章，写了好几篇了，关于requirejs快速入门，可以看下https://www.xyhtml5.com/post/requirejs_sy_lj
那项目中用requirejs方式书写和管理js，效果是不言而喻的，但是你用requirejs引入的依赖文件，虽然是异步的，但是还是会加载，还是会发生多次http请求！那么如何把这些js文件都合并到一起呢？这就引入了Optimizer，关于Optimizer，我们可以详见：http://requirejs.org/docs/optimization.html 这里有Optimizer的文档和用法。
但是，一般很多文档都是晦涩难懂的，其实，明明是很简单的问题，很多文档写的看起来很复杂，我在这里简单介绍一下requirejs的Optimizer，帮助大家迅速学会和使用Optimizer。
使用步骤。
1、需要安装node环境。
关于安装node,windows下面很简单，关于linux，请看https://www.xyhtml5.com/post/2n
具体就不多介绍了
2、需要下载r.js
r.js的下载地址是http://requirejs.org/docs/download.html#rjs
下载好以后就可以在命令行里对前端代码进行优化了。r.js 的参数传递使用方式，一是直接加在命令行后面，如下：
node r.js -o baseUrl=. paths.jquery=some/other/jquery name=main out=main-built.js这种方式适合简单地配置，一般情况下不推荐使用这种方式，我们一般用build.js进行文件的配置！
3、build.js 的配置代码案例如下：
{
baseUrl: "../js",
dir: "../dist",
optimize: "uglify",
optimizeCss: "standard.keepLines",
mainConfigFile: "../js/main.js",
removeCombined: true,
fileExclusionRegExp: /^\./,
modules: [
{
name: "app/dispatcher",
},
{
name: "app/in-storage",
exclude: [
"jquery",
"app/common",
"pkg/DatePicker/app"
]
}
]
}配置好了之后，我们直接运行
node r.js -o build.js就可以了。文件就会压缩到dist目录。
关于build.js的详细参数介绍，请看：https://github.com/jrburke/r.js/blob/master/build/example.build.js
4、build.js关于基本参数，如下：
appDir
应用程序的最顶层目录。可选的，如果设置了的话，r.js 会认为脚本在这个路径的子目录中，应用程序的文件都会被拷贝到输出目录（dir 定义的路径）。如果不设置，则使用下面的 baseUrl 路径。
baseUrl
默认情况下，所有的模块都是相对于这个路径的。如果没有设置，则模块的加载是相对于 build 文件所在的目录。另外，如果设置了appDir，那么 baseUrl 应该定义为相对于 appDir 的路径。
dir
输出目录的路径。如果不设置，则默认为和 build 文件同级的 build 目录。
optimize
JavaScript 代码优化方式。可设置的值：
- "uglify：使用 UglifyJS 压缩代码，默认值；
- "uglify2"：使用 2.1.2+ 版本进行压缩；
- "closure"： 使用 Google's Closure Compiler 进行压缩合并，需要 Java 环境；
- "closure.keepLines"：使用 Closure Compiler 进行压缩合并并保留换行；
- "none"：不做压缩合并；
optimizeCss
CSS 代码优化方式，可选的值有：
- "standard"：标准的压缩方式；
- "standard.keepLines"：保留换行；
- "standard.keepComments"：保留注释；
- "standard.keepComments.keepLines"：保留换行；
- "none"：不压缩；
mainConfigFile
如果不想重复定义的话，可以使用这个参数配置 RequireJS 的配置文件路径。
removeCombined
删除之前压缩合并的文件，默认值 false。
fileExclusionRegExp
要排除的文件的正则匹配的表达式。
modules
定义要被优化的模块数组。每一项是模块优化的配置，常用的几个参数如下：
- name：模块名；
- create：如果不存在，是否创建。默认 false；
- include：额外引入的模块，和 name 定义的模块一起压缩合并；
- exclude：要排除的模块。有些模块有公共的依赖模块，在合并的时候每个都会压缩进去，例如一些基础库。使用 exclude 就可以把这些模块在压缩在一个更早之前加载的模块中，其它模块不用重复引入。
总结
requirejs也可以结合上节课的grunt插件进行，具体可以看下grunt插件中的https://www.npmjs.com/package/grunt-contrib-requirejs
总之，我们进行压缩的目的是减少http请求，提高网站速度，对网站性能进行优化，大家选择什么方式压缩都可以。