优化RequireJS项目（合并与压缩）.docxVIP

本文将演示如何合并与压缩一个基于RequireJS的项目。本文中将用到苦干个工具，这其中就包括 HYPERLINK /1254/ \o Node.js 究竟是什么？ \t _blank Node.js。 因此，如果你手头上还没有Node.js可以 HYPERLINK / \t _blank 点击此处下载一个。 动机 关于RequireJS已经有很多文章介绍过了。这个工具可以将你的JavaScript代码轻易的分割成苦干个模块(module)并且保持你的代码模块化与易维护性。这样，你将获得一些具有互相依赖关系的JavaScript文件。仅仅需要在你的HTML文档中引用一个基于RequireJS的脚本文件，所有必须的文件都将会被自动引用到这个页面上。 但是，在生产环境中将所有的JavaScript文件分离，这是一个不好的做法。这会导致很多次请求(requests)，即使这个些文件都很小，也会浪费很多时间。 可以通过合并这些脚本文件，以减少请求的次数达到节省加载时间的目的。 另一种节省加载时间的技巧是缩小这些被加载文件的大小，相对小一些的文件会传输的更快一些。这个过程叫作 HYPERLINK /wiki/Minification_%28programming%29 \t _blank 最小化?(minification) ，它是通过小心的改变脚本文件的代码结构并且不改变代码的形为(behavior)和功能(functionality)来实现的。例如这些：去除不必要的空格，缩短(mangling，或都压缩)变量(variables)名与函数(methods，或者叫方法)名，等等。这种合并并压缩文件的过程叫做代码优化( optimization)。这种方法除了用于优化(optimization)JavaScript文件，同样适用于CSS文件的优化。 RequireJS有两个主要方法(method): define()和require()。这两个方法基本上拥有相同的定义(declaration) 并且它们都知道如何加载的依赖关系，然后执行一个回调函数(callback function)。与require()不同的是， define()用来存储代码作为一个已命名的模块。 因此define()的回调函数需要有一个返回值作为这个模块定义。这些类似被定义的模块叫作 HYPERLINK /docs/whyamd.html \t _blank AMD?(Asynchronous Module Definition，异步模块定义)。 如果你不大熟悉RequireJS或者不太明白我写的东西 – 不要担心。下面有一个关于这些的例子。 JavaScript应用程序的优化 在本小节中我将向大家展示如何优化Addy Osmani的 HYPERLINK /dependency-examples/backbone_require/ \t _blank TodoMVC Backbone.js + RequireJS 项目。 由于TodoMVC项目在不同的框架下包含许多TodoMVC实现，我下载了1.1.0版并提取出Backbone.js + RequireJS应用程序。 HYPERLINK /code/optimize-requirejs-projects/todo-mvc.zip \t _blank 点击这里下载该应用程序并解压下载到的zip文件。todo-mvc的解压目录将是我们这个例子的根目录(root path)，从现在起我将把这个目录引用为root。 查看root/index.html的源代码，你会发现它仅仅包含了一个script标签（另外一个是当你使用Internet Explorer时引用的）： index.html引用脚本文件的代码 script?type=text/javascript?src=js/lib/require/require.js?data-main=js/main/script ? !--[if?IE] ? ????script?src=js/lib/ie.js/script ? ![endif]--? 其实，整个项目只需要引用require.js这个脚本文件。如果你在浏览器中运行 HYPERLINK /code/optimize-requirejs-projects/todo-mvc/ \t _blank 这个项目，并且在你喜欢的（擅长的）调试工具的network标签中， 你就会发现浏览器同时也加载了其它的JavaScript文件： 所有在红线边框里面的脚本文件都是由RequireJS自动加载的。 我们将用 HYPERLINK /docs/optimization.html \t _b