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的参数通报运用体式格局，一是直接加在命令行背面，以下：
node r.js -o baseUrl=. paths.jquery=some/other/jquery name=main out=main-built.js
二是新建一个设置文件，比方 build.js（引荐运用这类体式格局），如许设置更轻易，以下：
node r.js -o build.js
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"
]
}
]
}
基本参数引见
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：`模块名； - `include：`分外引入的模块，`create：`假如不存在，是不是建立。默许`false`； - `exclude：`要消除的模块。有些模块有大众的依靠模块，在兼并的时刻每一个都邑紧缩进去，比方一些基本库。运用 exclude 就能够把这些模块在紧缩在一个更早之前加载的模块中，别的模块不必反复引入。
别的事项
RequireJS 设置也能够放到 RequireJS Optimizer 设置文件内里，比方：
{
baseUrl: "../js",
dir: "../dist",
optimize: "uglify",
optimizeCss: "standard.keepLines",
removeCombined: true,
fileExclusionRegExp: /^\./,
modules: [
{
name: "app/dispatcher",
},
{
name: "app/in-storage",
exclude: [
"jquery",
"app/common",
"pkg/DatePicker/app"
]
}
],
paths: {
jquery: 'lib/jquery',
underscore: 'lib/underscore',
backbone: 'lib/backbone/backbone',
backboneLocalstorage: 'lib/backbone/backbone.localStorage',
text: 'lib/require/text'
},
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
},
backboneLocalstorage: {
deps: ['backbone'],
exports: 'Store'
}
}
}
RequireJS Optimizer 的设置参数另有许多，完全的参数引见能够看这里：
为轻易运转，能够新建一个批处置惩罚文件：
@echo off
echo build...
e:
cd E:\SCM\SRC\scm-html\new-scm-html\tools
node r.js -o build.js
echo Press any key to exit!
echo. & pause
注意事项：RequireJS Optimizer 只支撑运用 require 和 define 语法定义的模块，因而下面这类经由过程变量定义的体式格局是不支撑的：
var mods = someCondition ? ['a', 'b'] : ['c', 'd'];
require(mods);
而假如是如许定义则能够：
require(['a', 'b']);
或许：
define(['a', 'b'], function (a, b) {});
进一步优化
运用 r.js 优化后的代码能够运用 almond 来加载。almond 是一个轻量的 AMD 加载器，供应了最基本的 AMD API 完成以及模块加载功用。almond 只要不到 400 行代码，要比 RequireJS 小许多。能够运用 r.js 把 almond 一同兼并到营业代码的前面，以下：
(function () {
//almond will be here
//main and its nested dependencies will be here
}());
almond 迥殊合适运用 AMD 的网站或运用，但也有一些限定：
- 一切的模块编译为一个文件，没有动态的加载；
- 一切的模块都须要在 define() 定义 ID 和依靠，这个 RequireJS Optimizer 会处置惩罚；
- 只能有一个 requirejs.config() 或许 require.config() 挪用；
- 不能运用 Require JS 多版本功用；
- 不能运用 require.toUrl() 或许 require.nameToUrl()；
- 不能运用 packages/packagePaths 设置。
假如你的项目中没有这些题目的话，能够放心运用 almond 举行加载。
via 妄想天空
