(转)requirejs：杏仁的优化(almond)

使用场景

什么情况下需要使用 almond 呢？假设你手头有个基于requirejs的小项目，所有业务代码加起来就几十K（压缩后可能更小）.出于性能优化的考虑，你可能在想：如果能够去掉requirejs的依赖就好了，毕竟，gzip后的requirejs还有大概20k（2.1.6版本）。

almond就是为了这个目的而诞生的，开发过程，你可以照常使用requirejs来管理你的依赖，而到了打包上线阶段，替换成almond就行了。gzip后的almond只有大约1k，优化幅度相当大。

例子：未使用almond

这一小节主要举个 requirejs+r.js 打包的例子，下一小杰会在本小节的基础上，通过 almond 进行进一步的优化。代码很简单，扫一下就可以了
目录结构如下：

demo.html
build.js
js/
js/main.js
js/cookie.js
js/util.js

demo.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>demo</title>

</head>

<body>

<h1>简单的requirejs例子 - almond</h1>

<script type="text/javascript" src="js/require.js" data-main="js/main-built.js"></script>

<!-- <script type="text/javascript" src="js/main-almond-built.js"></script> -->

</body>

</html>

js/main.js

requirejs.config({

baseUrl: 'js'

});

require(['cookie', 'util'], function(Cookie, Util){

Cookie.say('hello');

Util.say('hello');

});

js/cookie.js

define([], function(){

    return {

        say: function(msg){

            alert('cookie: '+msg);

        }

    };

});

js/util.js

define([], function(){

    return {

        say: function(msg){

            alert('util: '+msg);

        }

    };

});

用r.js打包

首先，在 build.js 里声明打包的配置

({

baseUrl: "js",

name: "main",

optimize: "none",

out: "js/main-built.js"

})

然后，下载打包工具 r.js

npm install -g requirejs

最后，通过 r.js 打包

r.js -o build.js

恭喜！可以看到 js 目录下生成了打包后的文件 main-built.js

js/main-built.js



define('cookie',[], function(){

return {

say: function(msg){

alert('cookie: '+msg);

}

};

});

define('util',[], function(){

return {

say: function(msg){

alert('util: '+msg);

}

};

});

requirejs.config({

baseUrl: 'js'

});

require(['cookie', 'util'], function(Cookie, Util){

Cookie.say('hello');

Util.say('hello');

});

define("main", function(){});

运行demo

为了检验打包后的结果是运行的，我们需要到浏览器里验证一下。首先我们要把 demo.html 里的资源引用修改下

<script type="text/javascript" src="js/require.js" data-main="js/main-built.js"></script>

在浏览器里打开 demo.html ，看到下面的弹窗，搞定

例子：使用了almond

我们看到，上面的例子打包后生成了 main-built.js ，gzip后看下文件多大

gzip main-built.js

可以看到只有174B，这种情况下，在页面中引用requirejs有点不划算，这个时候我们就要引入almond了

-rw-r--r-- 1 user staff 174B 4 20 22:03 main-built.js.gz

很简单，首先下载almond ，并放置到 js 目录下

然后，运行下面命令，通过 r.js + almond 生成打包后的文件 main-almond-built.js

r.js -o baseUrl=js name=almond include=main out=js/main-almond-built.js wrap=true optimize=none

js/main-almond-built.js

/**

 * @license almond 0.2.9 Copyright (c) 2011-2014, The Dojo Foundation All Rights Reserved.

 * Available via the MIT or new BSD license.

 * see: http://github.com/jrburke/almond for details

 */

// almond的代码篇幅略长，这里略过...

define("cookie",[],function(){return{say:function(e){alert("cookie: "+e)}}}),define("util",[],function(){return{say:function(e){alert("util: "+e)}}}),requirejs.config({baseUrl:"js"}),require(["cookie","util"],function(e,t){e.say("hello"),t.say("hello")}),define("main",function(){});

同样，在修改修改 main.js 的链接后，在浏览器里访问 demo.html ，done！

<script type="text/javascript" src="js/main-almond-built.js"></script>

看下gzip后的 main-almond-built.js 多大，只有1.6k！

-rw-r--r--  1 user  staff   1.6K  4 20 22:34 main-almond-built.js.gz

写在后面

本文简单介绍了下如何通过 almond 对依赖requirejs的项目进行进一步的优化。当然， almond 也存在着一些限制，比如无法动态加载模块、只能将模块打包成一个文件等，具体的可以参考这里。是否在打包阶段使用 almond 替代 requirejs ，得看具体场景，这里就不展开，后面有时间再简单介绍下。　　requirejs：杏仁的优化(almond)