优化需求项目相关技巧总结

本文将演示如何根据需求合并和压缩项目。在本文中，我们将使用艰苦的工作工具，包括Node.js。因此，如果您手头没有Node.js，可以单击此处下载一个。动机

有很多关于RequireJS的文章。该工具可以轻松地将您的JavaScript代码划分为硬模块，并保持您的代码模块化和易于维护。这样，你会得到一些相互依赖的JavaScript文件。只需在HTML文档中引用一个基于RequireJS的脚本文件，所有必要的文件都会自动引用到这个页面。

但是，在生产环境中分离所有的JavaScript文件是一种不好的做法。这会导致很多请求，即使这些文件很小，也会浪费很多时间。通过合并这些脚本文件，可以减少请求的数量以节省加载时间。

另一种节省加载时间的技术是减少这些加载文件的大小，这样传输会更快。这个过程被称为缩小，它是通过仔细改变脚本文件的代码结构而不改变代码的行为和功能来实现的。例如，它们是：删除不必要的空格，缩短变量和函数(方法或方法)的名称，等等。这个合并和压缩文件的过程称为代码优化。这种方法不仅用于优化)JavaScript文件，也适用于优化CSS文件。

RequireJS主要有两种方法：define()和require()。这两个方法基本上具有相同的声明，并且它们都知道如何加载的依赖项，然后执行回调函数。与require()不同，define()用于将代码存储为命名模块。因此，define()的回调函数需要有一个返回值作为模块定义。这些类似定义的模块被称为AMD(异步模块定义)。

如果你不熟悉需求或者不理解我写的东西——别担心。这里有一个例子。JavaScript应用程序的优化

在本节中，我将向您展示如何优化Addy Osmani的TodoMVC主干. js RequireJS项目。由于TodoMVC项目包含了很多不同框架下的TodoMVC实现，所以我下载了1.1.0版本，并提取了主干. RequireJS应用程序。单击此处下载应用程序并解压缩下载的zip文件。todo-mvc的提取目录将是我们示例的根路径，从现在开始，我将把这个目录称为根目录。

看看root/index.html的源代码，你会发现它只包含一个脚本标签(另一个是你使用Internet Explorer时引用的):index.html引用的是脚本文件的代码

脚本数据-main=' js/main ' src=' http : js/lib/require/require . js '/脚本！- [if IE]脚本src=' http : js/lib/IE . js '/脚本！[endif]-其实整个项目只需要参考脚本文件require.js如果你在浏览器和你最喜欢(擅长)的调试工具的网络选项卡中运行这个项目，你会发现浏览器还加载了其他的JavaScript文件：

红色边框中的所有脚本文件都是由RequireJS自动加载的。

我们将使用需求JS优化器来优化这个项目。根据下载的描述文件，找到r.js，复制到根目录。jrburke的R.js是一个命令行工具，可以运行基于AMD的项目，但更重要的是，它包含RequireJS Optimizer，允许我们合并和压缩脚本。

需求优化器有许多用途。它不仅可以优化单个JavaScript或CSS文件，还可以优化整个项目或其中的一部分，甚至多页应用程序。它也可以使用不同的缩小引擎或者什么都不用，等等。本文并不打算涵盖RequireJS Optimizer的所有可能性，而只是演示它的一种用法。

正如我之前提到的，我们将使用Node.js来运行优化器。使用以下命令运行它(优化器):运行需求优化器

$ node r.js -o参数有两种方法可以将参数传递给优化器。一种是在命令行上指定参数：在命令行上指定参数

$ node r.js-o基本URL=。另一种方法是构建一个配置文件(相对于执行文件夹)并包含指定的参数：

$ node r.js -o build.jsbuild.js的内容：配置文件中的参数

({baseurl: ')，名为：' main '，out : ' main-build . js ' })我认为构建配置文件比在命令行上使用参数更易读，所以我将采用这种方法。接下来，我们将为项目创建一个root/build.js文件，并包含以下参数：root/build.j。

({ appDir: '。/'，baseUrl: '。/js '，dir: '。/dist '，modules :[{ name : ' main ' }]，filexclusionregex p : /^(r|build)\.js$/，optimizeCss: ' standard '，removeCombined: true，path : { jquery : ' lib/jquery '，underscore : ' lib/Backbone/Backbone '，Backbone localstoraged : ' lib/Backbone/Backbone . local storage '，text: 'lib/require/text' }，shim 3: { underscore : { export s : ' _ ' '

了解更多关于需求优化器和更高级的应用程序。除了之前在其网页上提供的信息之外，您还可以单击此处查看所有可用配置选项的详细信息。

既然已经有了构建文件，就可以运行优化器了。输入根目录并执行以下命令：运行优化器$ noder.js-obuild.js将生成一个新文件夹：root/dist。需要注意的是，root/dist/js/main.js现在包含所有合并和压缩的文件及其依赖项。此外，root/dist/css/base.css也进行了优化。

运行优化后的项目，它看起来与优化前的项目完全相同。再次查看该页面的网络流量信息，会发现只加载了两个JavaScript文件。

RequireJs Optimizer将服务器上的脚本文件数量从13个减少到2个，并将文件的总大小从164KB减少到58.6KB(require.js和main.js)。

支付费用

显然，在优化之后，我们不再需要引用require.js文件。因为没有分离的脚本文件，并且所有具有依赖关系的文件都已加载。

然而，优化过程将我们所有的脚本合并到一个优化的脚本文件中，该文件包含对define()和require()的许多调用。因此，为了确保应用程序的正常运行，必须在应用程序的某个地方(即包含这些文件)指定并实现define()和require()。

这导致了众所周知的开销：我们总是有一些代码要实现define()和require()。这些代码不是应用程序的一部分，它们的存在只是为了我们的基础架构考虑。当我们开发一个JavaScript库时，这个问题变得特别大。与RequireJS相比，这些库通常非常小，因此将其包含在库中会造成巨大的开销。

在写这篇文章的时候，这个问题还没有完全的解决方案，但是我们可以用杏仁来缓解这个问题。Almond是一个非常简单的AMD加载器，实现了RequireJS接口(API)。因此，它可以用来替换优化代码中的RequireJS实现，我们可以在项目中包含almond。正如预期的那样，我正在开发一个优化器，它将能够在没有开销的情况下优化RequireJS应用程序，但它仍然是一个新项目(处于开发的初始阶段)，因此这里没有演示它。下载并总结

下载未优化的TodoMVC主干. js RequireJS项目或查看它。下载优化的TodoMVC主干. js RequireJS项目(位于dist文件夹中)或查看它。