前端优化：RequireJS Optimizer 的使用和配置方法

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

RequireJS Optimizer 是 RequireJS 自带的前端优化工具，可以对 RequireJS 项目中的 JavaScript & CSS 代码使用 UglifyJS 或者 Closure Compiler 进行压缩合并。这篇文章介绍RequireJS Optimizer 的使用和配置方法，帮助大家解决使用中碰到的问题。

RequireJS Optimizer 对脚本的优化支持目前流行的 UglifyJS 和 Closure Compiler 两种压缩方式，UglifyJS 需要 NodeJS 环境支持，而 Closure Compiler 则需要 Java 环境。这篇文章是以运行于 NodeJS 的 UglifyJS 来优化的，这也是 RequireJS Optimizer 默认的压缩方法。

首页需要安装 Node 0.4.0 或更高版本，然后下载  r.js，下载好以后就可以在命令行里对前端代码进行优化了。r.js 的参数传递使用方式，一是直接加在命令行后面，如下：

二是新建一个配置文件，例如 build.js（推荐使用这种方式），这样配置更方便，如下：

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 配置也可以放到 RequireJS Optimizer 配置文件里面，例如：

RequireJS Optimizer 的配置参数还有很多，完整的参数介绍可以看这里：

https://github.com/jrburke/r.js/blob/master/build/example.build.js

为方便运行，可以新建一个批处理文件：

注意事项：RequireJS Optimizer 只支持使用 require 和 define 语法定义的模块，因此下面这种通过变量定义的方式是不支持的：

而如果是这样定义则可以：

或者：

进一步优化

使用 r.js 优化后的代码可以使用 almond 来加载。almond 是一个轻量的 AMD 加载器，提供了最基础的 AMD API 实现以及模块加载功能。almond 只有不到 400 行代码，要比 RequireJS 小很多。可以使用 r.js 把 almond 一起合并到业务代码的前面，如下：

almond 特别适合使用 AMD 的网站或应用，但也有一些限制：

• 所有的模块编译为一个文件，没有动态的加载；
• 所有的模块都需要在 define() 定义 ID 和依赖，这个 RequireJS Optimizer 会处理；
• 只能有一个 requirejs.config() 或者 require.config() 调用；
• 不能使用 Require JS 多版本功能；
• 不能使用 require.toUrl() 或者 require.nameToUrl()；
• 不能使用 packages/packagePaths 配置。

如果你的项目中没有这些问题的话，可以放心使用 almond 进行加载。

本文链接：前端优化：RequireJS Optimizer的使用和配置方法

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源