RequireJS - 优化器

在本章中，我们将讨论 RequireJS 中的优化。RequireJS 中的优化器具有以下特征：

结合脚本文件，默认情况下使用 UglifyJS，Java 使用 Closure Compiler
将 CSS 文件合并在一起。

优化器是 Node 和 Nashorn 的 r.js 适配器的一个组件。它被开发为构建过程的一部分，而不是开发过程的一部分。

示例

在将 r.js 下载到您的项目文件夹后，文件夹的结构应如下所示：

projectfolder/
   |-->index.html
   |-->CSS/
      |--->main.css
      |--->other.css
   |-->libs
      |--->require.js
      |--->main.js
         |--->dependent1.js
         |--->dependent2.js
         |--->dependent3.js

您的 HTML 文件将如下所示：

<html>
   <head>
      <script data-main = "libs/main" src = "libs/require.js"></script>
   </head>
   
   <body>
      <h1> RequireJS Sample Page </h1>
   </body>
</html>

您的 main.js 文件将如下所示：

require(["dependent1", "dependent2", "dependent3"], function (dependent1, dependent2, 
   dependent3) {
});

您的 main.css 文件将如下所示：

@import url("other.css");

.app {
   background: transparent url(../../img/app.png);
}

优化器的基本设置

您可以使用命令行参数或配置文件构建属性来设置项目，两者可以互换。

以下是命令行的语法：

node r.js -o baseUrl = . paths.jquery = content/path/jquery 
   name = main out = main-built.js

以下是构建配置文件的语法：

({
   baseUrl: ".",
  
   paths: {
      jquery: "content/path/jquery"
   },
   
   name: "main",
   out: "main-built.js"
})

之后，您可以将构建配置文件名称传递到命令行中的优化器，如下所示：

node r.js -o build.js

命令行参数语法存在一些缺点。结合使用命令行参数或配置文件构建属性可以克服这些缺点。

优化单个 JS 文件

要优化单个 JS 文件，您需要创建一个 JS 文件，其中包含其所有依赖项的内容。您的文件应如下所示：

({
   baseUrl: "js/shop",
   paths: {
      "jquery": "jquery",
      "backbone": "backbone",
      "underscore": "underscore"
   },
   
   shim: {
      "backbone": {
         "department": ["underscore", "jquery"],
         "dependent": "Backbone"  
      },
      
      "underscore": {
         exports: "_" 
      }
   },
   
   name: "../main",
   out: "../built/js/main.js"
})

现在，您可以创建包含 app 所有依赖项的 main.js 文件。此文件用于在 HTML 文件中使用一个请求加载所有 JS 文件。请注意，创建的文件不应存在于源代码目录中；这些文件应位于项目的副本中。

CDN 资源的使用

优化器不使用网络资源/CDN（内容分发网络）加载脚本。如果需要使用 CDN 加载脚本，则需要将这些文件映射到模块名称并将文件下载到本地文件路径。您可以在构建配置文件的路径配置中使用特殊单词“empty”，如下面的语法所示：

({
   baseUrl: "js",
   name: "mainCDN",
   out: "js/mainCDN-built.js",
   
   paths: {
      jquery: "empty:"
   }
   
})

主文件将如下所示：

requirejs.config({
   paths: {
      'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'
   }
});

require(['jquery'], function ($) {
});

优化单个 CSS 文件

CSS 文件使用以下参数直接在命令行中进行优化，如下所示：

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

CSS 文件也可以在构建文件中使用相同的属性进行优化，如下所示：

...
cssIn:"main.css",
out:"main-built.css"
...

以上两种方法都是允许的，并将创建一个名为 projectfolder/css/mainbuild.css 的文件。此文件将包含 main.css 的内容，url() 路径已正确调整，并且已删除注释。

优化整个项目

优化器使用构建配置文件来优化所有 css 和 js 文件。在以下示例中，创建了 build.js 文件。

({
   baseUrl: "js/shop",
   appDir: '.',
   paths: {
      "jquery": "jquery",
      "backbone": "backbone",
      "underscore": "underscore"
   },
   
   shim: {
      "backbone": {
         "deps": ["underscore", "jquery"],
         "exports": "Backbone"  
      },
      
      "underscore": {
         exports: "_" 
      }
   },
   
   optimizeCss: "standard.keepLines",
   modules: [
      {
         name: "app"
      }
   ],
   
   dir: "../built"
})

build.js 文件指示 RequireJS 将所有 app 文件夹（appDir 参数）复制到输出文件夹 built（dir 参数），并将所有优化应用于输出文件夹中的文件。运行以下命令以在 app 文件夹中构建配置文件：

node r.js -o build.js

打印页面