r.js:理解需求的r.js优化器

Question

我试图弄清楚使用来自require.js的require.js来生成一个build.js文件是否是一个好主意，它只在生产中加载一个文件。但我想知道，在我的例子中，这是否是一个好主意，因为它似乎只是简单地将所有东西加载到DOM中，消耗了大量内存。也许我搞错了。

看看我使用require.js实现的基于主干的视图之一。我知道，r.js将接受这个文件并对其进行优化，并将其放入最终的build.js文件中，所有其他视图、模型和集合都将以相同的方式定义。

define(function (require) {
  "use strict";

  var $                   = require('jquery'),
      _                   = require('underscore'),
      Backbone            = require('backbone'),
      tpl                 = require('text!tpl/start.html'),
      Mustache            = require('mustache'),
      template            = Mustache.compile(tpl);

  return Backbone.View.extend({
    initialize: function () {
    },

    render: function () {
      this.$el.html(template());
      return this;
    },

    events: {
      'click #submit': "start"
    },

    start: function (event) {
       // stuff to do ...
    }
  });
});

我想最终的build.js只是简单地接受上面的代码并将它们连接到其中，对吗？因此，这意味着当我更新index.html加载require.js然后更新build.js文件时，它将简单地将所有视图、模型和集合加载到DOM中。不会占用太多的内存，因为我不需要从一开始就加载所有的东西。当它已经通过build.js文件加载时调用require('path/ to /my/view')有意义吗？

Answer 1

对于您的应用程序来说，将所有模块优化到一个文件中确实是没有意义的。r.js支持这种场景。您需要做的是使用modules选项，并根据需要定义尽可能多的输出文件。这方面的一个一般例子可以是：

modules: [
    {
        name: 'main', 
        exclude: [ "viewA", "viewB" ],
    },
    {
        name: 'viewA',
        exclude: ['core']
    },
    {
        name: 'viewB',
        exclude: ['core']
    }
]

上面的设置假设要优化的源有名为main、viewA和viewB的模块。它将创建3个优化的捆绑包:一个core，包含在任何情况下都要加载的所有核心模块；viewA，它代表在特定情况下将要加载的一组模块；viewB，表示在其他情况下将要加载的一组模块。

如何设置modules参数取决于应用程序的具体情况。