RequireJS - 使用 r.js 实现模块、项目的压缩合并（压缩js、css文件）

2017-07-26 发布：hangge 阅读：3589

使用 RequireJS 可以将我们的 JavaScript 代码轻易的分割成苦干个模块(module)，方便我们的开发与维护。但是在生产环境中，如果将所有的 JavaScript 文件分离，会导致很多次请求（requests），即使这个些文件都很小，也会浪费很多时间。

所以在生产环境中，我们可以通过合并这些脚本文件，以减少请求的次数达到节省加载时间的目的。

一、RequireJS Optimizer（RequireJS 优化器）

1，r.js 介绍

RequireJS 提供了一个打包压缩工具 r.js，它是一个能运行基于 AMD 的项目的命令行工具，可以用来实现对模块的合并压缩。

2，功能特点

RequireJS Optimizer 有很多用处。它不仅能够优化单个 JavaScript 或单个 CSS 文件，也可以优化整个项目或只是其中的一部分，甚至多页应用程序（multi-page application）。它还可以使用不同的缩小引擎（minification engines）或者干脆什么都不用（no minification at all），等等。

3，安装配置

（1）访问其 GitHub 主页：https://github.com/requirejs/r.js 并下载到本地。

（2）将 dist 文件夹下的 r.js 复制到项目文件夹下即可。

二、压缩合并 js 文件

1，压缩单个js文件

（1）假设我们要压缩项目中的 jquery-1.11.1.js

（2）首先在项目根目录下创建一个 build-js.js，其内容如下：

({
  name: "js/lib/jquery-1.11.1",
  out: "dist/jquery-1.11.1-build.js",
})

（3）打开命令窗口进入到项目文件夹，然后执行如下命令：

node r.js -o build-js.js

（4）可以看到文件已被成功压缩并保存到 dist 文件夹中。

2，压缩一个模块及其相关依赖

（1）这里假设要压缩我们的主模块 main.js，其内容如下。可以看到该模块还依赖 jquery，以及 hello 子模块。

require.config({
    baseUrl: 'js',
    paths: {
        jquery: 'lib/jquery-1.11.1',
    }
});

require(['jquery', 'script/hello'],function ($, hello) {
    $("#btn").click(function(){
      hello.showMessage("hangge.com");
    });
});

（2）首先在项目根目录下创建一个 build-js.js，其内容如下：

({
  baseUrl: 'js',
  name: "script/main",
  out: "dist/main-build.js",
  paths: {
    jquery: 'lib/jquery-1.11.1',
  }
})

（3）打开命令窗口进入到项目文件夹，然后执行如下命令：

node r.js -o build-js.js

（4）可以看到程序会自动关联相关的依赖

（5）并将它们全部合并成一个文件。

3，排除出不需要合并的文件

上面的样例可以发现，由于 main 模块依赖于 jquery 以及 hello 模块，对 main 压缩的同时会把依赖的模块代码也一同合并进来。我可以通过配置，选择不需要合并进来的文件。

（1）我们对 build-js.js 做如下修改，使得压缩 main 模块时，不会将 jquery 也一同压缩合并进来。

({
  baseUrl: 'js',
  name: "script/main",
  out: "dist/main-build.js",
  paths: {
    jquery: "empty:"
  }
})

（2）再次执行命令压缩 main 模块，可以看到 jQuery 已经被排除在外了。

4，只合并不压缩代码

通过 optimize 参数我们可以指定是否压缩代码，它可设置如下几种值：

none：不压缩
uglify：使用 UglifyJS 压缩（默认值）
closure：使用 Closure Compiler

这里我们将 optimize 设置为 none，那么代码就只合并不压缩，方便我们开发调试。

({
  baseUrl: "js",
  name: "script/main",
  out: "dist/main-build.js",
  optimize: "none",
  paths: {
    jquery: "empty:"
  }
})

三、压缩合并 css 文件

1，压缩单个 css 文件

（1）假设我们要压缩 main.css 这个文件。

（2）打开命令窗口进入到项目文件夹，然后执行如下命令：

node r.js -o cssIn=css/main.css out=dist/main-built.css optimizeCss=standard

（3）可以看到 css 文件已经成功压缩，并保存到 dist 文件夹中。

2，压缩合并多个 css 文件

（1）假设我们要将多个 css 文件合并在一起，首先新建个 all.css 文件将要合并的文件使用 @import 引入，其内容如下：

@import url("main.css");
@import url("home.css");

（2）接着我们压缩这个 all.css 文件

node r.js -o cssIn=css/all.css out=dist/all-built.css optimizeCss=standard

（3）可以看到 main.css 和 home.css 已经被压缩合并到一起了。

3，只合并不压缩

通过 optimizeCss 参数可以指定是否压缩代码，前面我们都使用标准压缩。它可设置如下几种值：

none：不压缩，仅合并
standard：标准压缩（去换行、空格、注释）
standard.keepLines：除标准压缩外，保留换行
standard.keepComments：除标准压缩外，保留注释
standard.keepComments.keepLines：除标准压缩外，保留换行和注释

这里我们将 optimizeCss 设置为 none，那么多个 css 就只合并不压缩，方便我们开发调试。

node r.js -o cssIn=css/all.css out=dist/all-built.css optimizeCss=none

四、压缩整个项目

我们项目中可能是既有 js 也有 css，如果每次都要分别压缩就很麻烦，其实 RequireJS Optimizer 可以实现项目整体压缩的功能。

1，操作步骤

（1）先在项目根目录下创建一个 build.js，其内容如下：

({
    appDir: './',
    baseUrl: './js',
    dir: '../dist',
    modules: [
        {
            name: 'script/main'
        }
    ],
    fileExclusionRegExp: /^(r|build)\.js$/,
    optimizeCss: 'standard',
    removeCombined: true,
    paths: {
        jquery: 'lib/jquery-1.11.1',
        underscore: 'lib/underscore',
        backbone: 'lib/backbone'
    },
    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: [
                'underscore',
                'jquery'
            ],
            exports: 'Backbone'
        }
    }
})

参数说明：

appDir：应用程序的目录（即 <root>）。在这个文件夹下的所有文件将会被复制到 dir 参数标注的文件夹下。
baseUrl：相对于 appDir，代表查找文件的锚点（that represents the anchor path for finding files）。
dir：这是一个输出目录，所有的应用程序文件将会被复制到该文件夹下。
modules：一个包含多个对象的数组。每个对象代表一个将被优化的模块（module）。
fileExclusionRegExp：任何与此规则匹配的文件或文件夹都将不会被复制到输出目录。由于我们把 r.js 和 build.js 放置在应用程序目录下，我们希望优化器（optimizer）排除这两个文件。因此我们可以这样设置 /^(r|build)\.js$/。
optimizeCss：RequireJS Optimizer 会自动优化应用程序下的 CSS 文件。这个参数控制 CSS 最优化设置。具体可选值见上方 css 部分。
removeCombined：如果为 true，优化器（optimizer）将从输出目录中删除已合并的文件。
paths：模块（modules）的相对目录。
shim：为那些没有使用 define() 声名依赖关系及设置模块值的模块，配置依赖关系与“浏览器全局”出口的脚本。

（2）打开命令窗口进入到项目文件夹，然后执行如下命令开始压缩：

node r.js -o build.js

2，结果比较

（1）命令执行后可以看到程序会自动关联相关的依赖并压缩。

（2）下面左侧是项目压缩前的文件目录结构，右侧是压缩后的。