资讯专栏INFORMATION COLUMN

前端优化:RequireJS Optimizer 的使用和配置方法

Alan / 1456人阅读

摘要:是自带的前端优化工具,可以对项目中的和代码使用或者进行压缩合并。这篇文章介绍的使用和配置方法,帮助大家解决使用中碰到的问题。对脚本的优化支持目前流行的和两种压缩方式,需要环境支持,而则需要环境。定义要被优化的模块数组。

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:`模块名;

- `include:`额外引入的模块,`create:`如果不存在,是否创建。默认`false`;

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

example.build.js

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

@echo off 

echo build...
e:
cd E:SCMSRCscm-html
ew-scm-html	ools

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

 

via 梦想天空

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/110836.html

相关文章

  • requirejs插件介绍与制作

    摘要:一句化即它是插件的插件,作者事后才发现有这么一个插件绕了不少弯路。这里的主要是为了保存这段内容用于打包使用。免费领取验证码内容安全短信发送直播点播体验包及云服务器等套餐更多网易技术产品运营经验分享请访问网易云社区。文章来源网易云社区 本文由作者郑海波授权网易云社区发布。 前言我这里就不介绍requirejs了, 简而言之: requirejs是支持AMD规范的模块加载器, 事实上它也是...

    shinezejian 评论0 收藏0
  • 使用require.js构建优化项目实践

    摘要:尝试用自己主页的简单代码构建优化下。存放和,放需要构建的项目代码,为构建目标文件夹。我另外一篇博文构建优化有简单说了下,构建的命令,其实上的官网,看有更详细的内容。 尝试用自己主页的简单代码构建优化下。 在文件夹requirejs-optimizer下新建三个文件夹:tools,www和www-built。tools存放r.js和build.js,www放需要构建的项目代码,www-b...

    anRui 评论0 收藏0
  • 前端构建】RequireJS及其优化工具

    摘要:介绍一款模块加载工具的入门,并且重点介绍其优化工具。发布目录项目源代码工具目录,例如构建工具等。另外,前端代码发布前都会进行压缩,使文件足够小。原来是因为里了,所以优化工具把也合并进来了。而优化工具要用好,要多尝试他们的配置选项。 前端变化太快,如今RequireJS已经无法吸引眼球了。介绍一款模块加载工具:RequireJS的入门,并且重点介绍其优化工具。 一、RequireJS简介...

    Loong_T 评论0 收藏0
  • 前端性能优化——加载页面静态资源(入门级别)

    摘要:服务器可以在与每次客户端传送的字段进行比较,如果相等,则表示未修改,响应反之,则表示已修改,响应状态码,返回新资源。 最近一直在准备面试,接触了一些性能优化方面的知识,前端性能优化主要从两个方面进行: 1.加载页面和静态资源;2.页面渲染; 这篇文章主要讲第一点: 加载页面和静态资源 加载页面和静态资源主要可以从三个角度进行: 静态资源的合并、压缩(http2.0时代有变) 静态资源...

    moven_j 评论0 收藏0
  • FIS

    摘要:执行这个指令,对项目进行发布。寻找文件,放在文件底下寻找文件,放在文件底下中语法拓展,我们可以将表示除拓展名以外的任何字符。告知,需要制作精灵图。替换内置打包工具中的路径不会自动修改。配置规范规范插件入口,引入文件方式不同。 Fis简介 一个工程化的工具,主要用来处理前端的项目。作用:代码合并,代码压缩,资源定义,资源嵌套等等。 fis 是基于流的处理,fis有自己的一个流处理过程: ...

    mdluo 评论0 收藏0

发表评论

0条评论

Alan

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<