我正在使用Backbone / Marrionette和AMD Require.js
我的目标是通过合并所有文件来加快Web应用程序的加载速度。我需要加载的文件越少，加载速度就越快。
到目前为止，我已经成功地将/lib文件夹中的文件合并起来。这些文件包括jQuery、underscore、backbone等常规lib文件。合并后，我得到了一个名为main.js的文件，其中包含所有文件。虽然如此，但我无法将我的应用程序文件合并。我正在使用r.js完成此任务。
以下是应用程序文件夹结构：
- css
- img
js
- views（大多数文件都在这里）
- collections
- models
- regions
- routers
- lib
- controllers
app.js config.js main.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': {
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']
这是 app.js 文件：
define([
'marionette',
'lib/marionette.handlebars',
'wreqr',
'routers/router',
'views/header_view',
'views/footer_view',
'lib/foundation',
'lib/foundation.dropdown',
'lib/foundation.orbit',
'lib/foundation.reveal',
'controllers/format_controller'
], function(
Marionette,
MarionetteHandlebars,
Wreqr,
Router,
HeaderView,
FooterView,
Foundation,
Dropdown,
Orbit,
Reveal,
FormatController
)
{
var App = new Marionette.Application();
App.addRegions({
header : '#header',
main : '#main',
footer : '#footer'
});
App.addInitializer(function(config) {
$.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
options.xhrFields = {
withCredentials: true
};
});
// Make the application config available via request/response.
this.reqres.setHandler('config', _.bind(function() {
return config;
}, this));
// Make the application session available via request/response.
this.reqres.setHandler('session', _.bind(function() {
return null;
}, this));
});
App.addInitializer(function(config) {
App.request = new Wreqr.RequestResponse();
new Router({vent: App.vent, reqres: App.reqres});
Backbone.history.start();
});
// Initialize any utilities that will be available through vent or reqres.
App.addInitializer(function(config) {
// String formatter for dates, etc.
new FormatController({vent: App.vent, reqres: App.reqres});
})
App.vent.on('app:main:show', function(view, isLoggedIn) {
App.header.close();
App.main.close();
App.footer.close();
var totalRegionsShown = (isLoggedIn) ? 3 : 1;
var initFoundation = _.after(totalRegionsShown, function() {
$(document).foundation();
});
if (isLoggedIn) {
var headerView = new HeaderView({
reqres: view.reqres
});
headerView.on('show', _.bind(initFoundation, this));
App.header.show(headerView);
var footerView = new FooterView();
footerView.on('show', _.bind(initFoundation, this));
App.footer.show(footerView);
}
view.on('show', _.bind(initFoundation, this));
App.main.show(view);
});
return App;
最后，这是我的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) {
var runEnvironment = "stg";
console.log(Config[runEnvironment]);
console.log("Running environment is: " + runEnvironment);
App.start(Config[runEnvironment]);
});
在现有的应用程序结构下，我需要做的事情是否可行，或者我需要彻底重新组织应用程序？
让我再重复一遍，给定的build.js将整个lib文件夹拼接在一起。所以我大大提高了速度，并且减少了近15个Java文件。但是，视图、模型、控制器、路由等都没有被改动。
return App;后面缺少});是复制/粘贴时的笔误吗？ - g10