使用 Require.js 进行项目优化答案

【问题标题】：Project optimization with Require.js使用 Require.js 进行项目优化
【发布时间】：2013-12-29 17:08:25
【问题描述】：

我在缩小应用程序时遇到问题。我的目标是拥有尽可能少的 Javascript 文件。我得到了部分结果，我能够连接位于 lib/ 文件夹中的所有文件。它们都捆绑在 main.js 文件中，并且工作正常。

但是，其余的应用程序文件并没有捆绑在一个文件中，它们只是被缩小和丑化了。

我正在使用 node 使用此命令启动进程：

node r.js -o build.js

我的应用程序文件夹结构：

CSS

img

js

收藏

型号

库

路由器

观看次数

控制器

模板（车把文件）

app.js

main.js

config.js

r.js

build.js

我的 build.js 文件：

({
appDir: './',
baseUrl: './js',
dir: './dist',
modules: [
    {
        name: 'main'
    }
],
fileExclusionRegExp: /^(r|build)\.js$/,
optimizeCss: 'standard',
removeCombined: true,
paths: {
    underscore        : 'lib/underscore',
    backbone        : 'lib/backbone',
    babysitter  : 'lib/backbone.babysitter',
    wreqr       : 'lib/backbone.wreqr',
    marionette        : 'lib/backbone.marionette',
    handlebars  : 'lib/handlebars',
    jquery                : 'lib/jquery',
    jqueryui        : 'lib/jqueryui',
    text        : 'lib/text',
    templates   : '../templates'
},
shim: {
    underscore: {
        exports: '_'
    },
    backbone: {
        exports: 'Backbone',
        deps: ['jquery', 'underscore']
    },
    jqueryui: {
        exports: '$',
        deps: ['jquery']
    },
    babysitter: {
        exports: 'Backbone.Babysitter',
        deps: ['backbone']
    },
    wreqr: {
        exports: 'Backbone.Wreqr',
        deps: ['backbone']
    },
    marionette: {
        exports: 'Backbone.Marionette',
        deps: [
            'backbone',
            'babysitter',
            'wreqr',
            'lib/json2'
        ]
    },
    handlebars: {
        exports: 'Handlebars'
    },
    'lib/marionette.handlebars': {
        exports: 'Marionette.Handlebars',
        deps: ['handlebars', 'marionette']
    }
    'lib/foundation.reveal': {
        exports: '$',
        deps: ['lib/foundation']
    },
    'lib/foundation.dropdown': {
        exports: '$',
        deps: ['lib/foundation']
    }
},
deps: ['jquery', 'underscore']
})

这是我的 main.js 文件：

require.config({
baseURL: '.',
urlArgs: "ver=2", //Control Client Cache. Change this value for every new release.
paths: {
    underscore          : 'lib/underscore',
    backbone          : 'lib/backbone',
    babysitter    : 'lib/backbone.babysitter',
    wreqr         : 'lib/backbone.wreqr',
    marionette          : 'lib/backbone.marionette',
    handlebars    : 'lib/handlebars',
    jquery                  : 'lib/jquery',
    jqueryui          : 'lib/jqueryui',
    text          : 'lib/text',
    templates     : '../templates'

},
waitSeconds: 60,
shim: {

    underscore: {
        exports: '_'
    },
    backbone: {
        exports: 'Backbone',
        deps: ['jquery', 'underscore']
    },
    jqueryui: {
        exports: '$',
        deps: ['jquery']
    },
    babysitter: {
        exports: 'Backbone.Babysitter',
        deps: ['backbone']
    },
    wreqr: {
        exports: 'Backbone.Wreqr',
        deps: ['backbone']
    },
    marionette: {
        exports: 'Backbone.Marionette',
        deps: [
            'backbone',
            'babysitter',
            'wreqr',
            'lib/json2'
        ]
    },
    handlebars: {
        exports: 'Handlebars'
    },

    'lib/marionette.handlebars': {
        exports: 'Marionette.Handlebars',
        deps: ['handlebars', 'marionette']
    },
    'lib/foundation': {
        exports: '$',
        deps: ['jquery']
    },
    'lib/foundation.orbit': {
        exports: '$',
        deps: ['lib/foundation']
    },
    'lib/foundation.reveal': {
        exports: '$',
        deps: ['lib/foundation']
    },
    'lib/foundation.dropdown': {
        exports: '$',
        deps: ['lib/foundation']
    }
},
deps: ['jquery', 'underscore']
});

require(['app', 'backbone', 'config'], function(App, Backbone, Config) {
App.start(Config);
});

【问题讨论】：

“Main 与 build.js 几乎相同” - 你是什么意思？包含它也可能很有用。
我已经完全按照原样包含了 main.js 文件。
那么您如何确认您的代码未包含在最终捆绑包中？查看（缩小的）输出 .js 文件或查看浏览器的网络选项卡并确认它是否加载了各个模块？
我正在使用提琴手。 Fiddler 显示不再加载任何库/文件。我看到 main.js 增加了大约 250KB。提琴手也显示我所有的视图都是一一加载的。一旦加载了最后一个，应用程序就会启动。

标签： javascript node.js requirejs

【解决方案1】：

我想是时候回答我自己的问题了。在构建文件中（你可以随意命名），只需添加此参数，所有内容都会很好地捆绑在一个文件中：

 findNestedDependencies: true,

【讨论】：