<script data-main="js/main" src="/UploadFiles/2021-04-02/require.js">

其实，整个项目只需要引用require.js这个脚本文件。如果你在浏览器中运行这个项目，并且在你喜欢的（擅长的）调试工具的network标签中， 你就会发现浏览器同时也加载了其它的JavaScript文件： 



所有在红线边框里面的脚本文件都是由RequireJS自动加载的。


我们将用RequireJS Optimizer（RequireJS优化器）来优化这个项目。根据已下载的说明文件，找到r.js并将其复制到<root>目录。 jrburke的r.js是一个能运行基于AMD的项目的命令行工具，但更重要的是，它包含RequireJS Optimizer允许我们对脚本文件(scripts)合并与压缩。
RequireJS Optimizer有很多用处。它不仅能够优化单个JavaScript或单个CSS文件，它还可以优化整个项目或只是其中的一部分，甚至多页应用程序(multi-page application)。它还可以使用不同的缩小引擎(minification engines)或者干脆什么都不用(no minification at all)，等等。本文无意于涵盖RequireJS Optimizer的所有可能性，在此仅演示它的一种用法。
正如我之前所提到的，我们将用到Node.js来运行优化器(optimizer)。用如下的命令运行它(optimizer)：

运行RequireJS Optimizer

 




$ node r.js -o <arguments>



有两种方式可以将参数传递给optimizer。一种是在命令行上指定参数：

在命令行上指定参数

 




$ node r.js -o baseUrl=. name=main out=main-built.js



另一种方式是构建一个配置文件(相对于执行文件夹)并包含指定的参数 ：

 




$ node r.js -o build.js



build.js的内容：配置文件中的参数

 




({
  baseUrl: ".",
  name: "main",
  out: "main-built.js"
})



我认为构建一个配置文件比在命令行中使用参数的可读性更高，因此我将采用这种方式。接下来我们就为项目创建一个<root>/build.js文件，并且包括以下的参数： <root>/build.j 




({
  appDir: './',
  baseUrl: './js',
  dir: './dist',
  modules: [
    {
      name: 'main'
    }
  ],
  fileExclusionRegExp: /^(r|build)\.js$/,
  optimizeCss: 'standard',
  removeCombined: true,
  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的所有配置项并不是本文的目的所在，但我想解释（描述）一下本文中我所采用的参数： 



 了解RequireJS Optimizer的更多介绍以及更多高级应用，除了其网页早先提供的资料，你可以点击此处查阅所有可用配置选项的详细的信息。
既然现在已经有了构建文件（build file），那么就可以运行优化器（optimizer）了。进入<root> 目录并执行如下命令：

运行优化器（optimizer）

 

$ node r.js -o build.js

一个新的文件夹会被生成：<root>/dist。重要的是要注意到，现在<root>/dist/js/main.js包含了所有已合并与压缩的具有依赖关系的文件。 此外，<root>/dist/css/base.css也被优化了。
运行优化后的项目，它看起来与未优化之前的项目完全一样。再检查一下该页面的网络传输（network traffic）信息，会发现仅有两个JavaScript文件被加载。 



 RequireJs Optimizer将服务器上的脚本文件从13个减少到2个并且将文件的总大小从164KB减少到58.6KB（require.js与main.js）。
开销
显然，在优化之后，我们再也没有必要引用require.js文件了。因为已经没有被分离的脚本文件了并且所有具有依赖关系的文件也已被加载。
尽管如此，优化过程将我们所有的脚本合并生成了一个优化后的脚本文件，其中包含了很多次define() 和require()调用。 因此，为了保证应用程序能够正常运行，define()和require()必须指定并实施到应用程序的某处（即包含这些文件）。
这会导致一个众所周知的开销：我们总是会有一些代码实现define()和require()。这些代码并不是应用程序的一部分，它们的存在仅仅是为我们的基础建设考虑（infrastructure considerations）。 当我们开发一个JavaScript库（JavaScript library）时，这个问题变得尤为巨大。相比RequireJS，这些库通常都很小，因此在库中包含它会造成一笔巨大的开销。
在我写这篇文章的时候，对于这方面的开销还没有一个完整的解决方案，但是我们可以使用almond来缓解这个问题。Almond是一个极简单的AMD加载器，它实现了RequireJS接口（API）。因此，可以用来在已优化过的代码中替代RequireJS实现，我们可以在项目中包含almond。

如令，我正致力于开发一个优化器（optimizer），它将能够优化RequireJS应用程序，而无需开销，但它仍然是一个新的项目（处于开发的初期阶段）因此这里没有任何关于它的展示。

下载与总结

  
    下载 未经优化的TodoMVC Backbone.js + RequireJS 项目或者查看它。
  
    下载 优化后的TodoMVC Backbone.js + RequireJS 项目（位于dist文件夹下）或查看它。