HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > RequireJS Optimizer 的使用和配置方法

RequireJS Optimizer 的使用和配置方法

       RequireJS Optimizer 是 RequireJS 自带的前端优化工具,可以对 RequireJS 项目中的 JavaScript & CSS 代码使用 UglifyJS 或者 Closure Compiler 进行压缩合并。这篇文章介绍RequireJS Optimizer 的使用和配置方法,帮助大家解决使用中碰到的问题。

 

          R equireJS 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 配置文件里面,例如:

+ View Code
  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 的使用和配置方法】相关文章

1. RequireJS Optimizer 的使用和配置方法

2. Node.js 的 ORM 框架,​Sequelize 2.0.0 正式发布!

3. Node.js 的 ORM框架,Sequelize 2.0.4 发布

4. HTML 5 的自定义 data-* 属性和jquery的data()方法的使用

5. html5的自定义data-*属性与jquery的data()方法的使用

6. HTML 5 的自定义 data-* 属性和jquery的data()方法的使用

7. html5的自定义data-*属性与jquery的data()方法的使用

8. 基于Threejs的jQuery 3d图片旋转木马特效插件

9. 触控+HTML5!物理益智游戏ContreJour推网页版

10. 提高HTML5应用和网站性能的50条秘技

本文来源:https://www.51html5.com/a3466.html

点击展开全部

﹝RequireJS Optimizer 的使用和配置方法﹞相关内容

「RequireJS Optimizer 的使用和配置方法」相关专题

其它栏目

也许您还喜欢