开发学院

您的位置:首页>教程>正文

教程正文

RequireJS 优化器

RequireJS 优化器

  在本章中,我们将讨论RequireJS中的优化。RequireJS中的优化器具有以下特性:

   -可以对项目中的 JavaScript 代码使用 UglifyJS 或者 Closure Compiler 进行压缩合并

   -将CSS样式文件进行压缩合并在。

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

例子

  下载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"
})

  现在,您可以创建main .js文件,该文件具有app的所有依赖项目。此文件用于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"
...

  使用上述任一方法,并创建名为project folder/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将所有应用程序文件夹(appDir参数)复制到构建的输出文件夹(dir参数),并将所有优化应用于位于输出文件夹中的文件。运行以下命令在app文件夹中构建配置文件:

node r.js -o build.js