前端优化：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 的参数传递使用方式，一是直接加在命令行后面，如下：

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：模块名；

　　　　create：如果不存在，是否创建。默认 false；

　　　　include：额外引入的模块，和 name 定义的模块一起压缩合并；

　　　　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 的配置参数还有很多，完整的参数介绍可以看这里：

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

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

@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 进行加载。

您可能感兴趣的相关文章

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

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