【发布时间】：2017-01-03 14:17:39
【问题描述】：
我目前正在尝试提高一个相当大的 Angular JS 应用程序的性能，方法是从一大块 javascript 文件转移到拥有 3 到 4 个更小的文件，甚至可能会延迟加载。
我正在使用以下 npm 包和版本：
grunt-contrib-requirejs: 1.0.0
grunt: 0.4.5
requirejs: 2.3.0
最初，有一个 grunt 任务，它获取所有必需的 javascript 文件，使用 requirejs 优化器将它们全部包含到一个文件中，因为有一个主配置文件 main.js 其中所有路径和垫片用于所有定义了特定的包（如果需要，我可以发布示例配置等）。
现在的想法是从只有一个大文件，将应用程序模块化为 3 - 4 个较小的 javascript 文件，以缩短加载时间（因为并行加载 4 个小文件比加载 1 个大文件要快）。
为此，我们使用 grunt-requirejs 中的 modules 选项和 bundles 选项来定义所有模块及其内容。
项目结构如下：
/src/
./Gruntfile.js
./scripts/
./app.js
./vendor.js
./app_mini.js
./features/
./test.service.js
/dist/
grunt 任务是这样定义的：
requirejs: {
bundle: {
options: {
baseUrl: '/src',
mainConfigFile: '/src/scripts/app.js',
bundlesConfigOutFile: 'scripts/app.js',
findNestedDependencies: true,
dir: '/dist',
modules: [
{
name: 'scripts/vendor',
exclude: [],
override: {
{
paths: {
'angular': 'bower/angular/angular',
'jquery': 'bower/jquery/dist/jquery'
},
bundles: {
}
},
}
},
{
name: 'scripts/app',
exclude: ['scripts/vendor'],
override: {
{
paths: {
'vendor': 'scripts/vendor',
'app_mini': 'scripts/app_mini',
'testservice': 'scripts/features/test.service'
},
bundles: {
'vendor': ['angular', 'jquery']
}
}
}
]
}
}
}
requirejs:bundle 执行后的 dist 文件夹如下所示：
/dist/
./scripts/
./app.js
./vendor.js
所以，app_mini 和 testservice 包含在 app.js 中，angular 和 jquery 包含在 vendor.js 中。
我在 src 文件夹中的app.js 或多或少看起来像这样：
define('app',
[
'angular',
'app_mini',
'testservice'
],
function(
angular,
app_mini,
testservice) {}
);
require([
'angular',
'app_mini',
'testservice'
], function (
angular,
app_mini,
testservice
) {
// entry to app
}, function(err) {
console.log('error loading module: ' + err.requireModules);
};
很抱歉文件内容太长，但没有它就无法描述问题:) 所以，问题是，我想有一个中心位置来为优化器和应用程序本身放置整个 Requirejs 配置。但是，显然优化器的路径是相对于 gruntfile 的路径，而运行的应用程序的路径是相对于相应的文件。
由于 bundle 配置是由 requirejs 自动生成的（因为 bundlesConfigOutFile），我不能对那里使用的名称做很多事情，因为它们是从模块选项中提取的。
生成并包含在 app.js 中的 bundles 配置如下所示：
require.config({
bundles: {
'scripts/vendor': [
'angular',
'jquery'
],
'scripts/app': [
'testservice',
'app_mini',
'app'
]
}
});
首先，我遇到了 RequireJs 想要通过路径 scripts/scripts/vendor.js 加载 vendor.js 的问题
为了解决这个问题，我在app 的require.config 中加入了baseUrl = '/'
但现在我有一个问题，testservice 无法注入 app_mini 和 angular，所以它在那里抛出错误，因为这两个模块都未定义。
dist文件夹中优化后的app.js是这样的，或许你能发现问题：
(function(){
define(
'testservice',[
'angular',
'app_mini'
], function(
angular,
app_mini
) {
'use strict';
app_mini.factory('testservice', TestService);
function TestService() {
var service = {
test: test
};
return service;
};
var test = function() {
console.log("testservice::test()");
};
});
define('app_mini',
[
'angular',
'testservice'
],
function (
angular,
testservice
) {
'use strict';
var module = angular.module(‘some.project’, []);
module.run(AppRun);
AppRun.$inject = [
'$rootScope',
'testservice'
];
function AppRun($rootScope, testservice) {
console.log(“yay, it works”);
testservice.test();
}
return module;
}
);
require.config({
bundles: {
'scripts/vendor.bundle': [
'angular',
'jquery'
],
'scripts/app.bundle': [
'testservice',
'app_mini',
'app'
]
}
});
require.config({
baseUrl: '/'
});
define(‘app’,
[
'angular',
'app_mini',
'testservice'
], function(
angular,
app_mini,
testservice
){});
require([
'angular',
'app_mini',
'testservice'
], function (
angular,
app_mini,
testservice
) {
angular.element().ready(function () {
var $html = angular.element(document.getElementsByTagName('html')[0]);
angular.bootstrap($html, [app_mini['name']]);
});
}, function (err) {
'use strict';
console.log('Error loading requirejs-module: ' + err.requireModules);
});
define("scripts/app.bundle", function(){});
})();
【问题讨论】：
标签： javascript requirejs grunt-contrib-requirejs