Question

我目前正试图提高相当大的Angular JS应用程序的性能，从一大块javascript文件转移到3-4个较小的文件，甚至可能会延迟加载。

我正在使用以下npm包和版本：

grunt-contrib-requirejs: 1.0.0
grunt: 0.4.5
requirejs: 2.3.0

最初，有一个grunt任务，它使用requirejs优化器将所有必需的javascript文件包含在一个文件中，因为有一个主配置文件main.js，其中所有路径和填充程序所有特定的包都已定义（如果需要，我可以发布样本配置等）。

现在的想法是从拥有这个大文件，到将应用程序模块化为3-4个较小的javascript文件，以缩短加载时间（因为并行加载4个小文件比加载1个大文件更快）。

为此，我们使用grunt-requirejs中的modules选项和bundle选项来定义所有模块及其内容。

项目结构如下：

/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中的bundle配置如下所示：

require.config({
  bundles: {
    'scripts/vendor': [
      'angular',
      'jquery'
    ],
    'scripts/app': [
      'testservice',
      'app_mini',
      'app'
    ]
  }
});

现在首先，我遇到了问题，即RequireJs想要通过路径scripts/scripts/vendor.js加载vendor.js

要解决此问题，我在baseUrl = '/' require.config

中添加了app

但现在我遇到了一个问题，testservice无法注入app_mini和angular，因此它会抛出一个错误，因为这两个模块都是未定义的。 / p>

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(){});
 
})();

Answer 1

好吧，我想可能没有人会读完所有这些，我只是注意到我可以更好地指出真正的问题。（ app_mini和angular在注入testservice时未定义）

所以问题只是我完全错过了传递shim配置，这允许需要js将angular和jquery包装到AMD模块中。因为缺少了，所以永远找不到angular，这破坏了app_mini以及testservice，因此也破坏了整个应用程序。

所以我通过添加垫片来编辑供应商模块配置：

modules: [
      {
        name: 'scripts/vendor',
        exclude: [],
        override: {
          {
            paths: {
              'angular': 'bower/angular/angular',
              'jquery': 'bower/jquery/dist/jquery'
            },
            shim: {
              angular: {
                exports: 'angular',
                deps: ['jquery']
              }
            },
            bundles: {
            } 
          },
        }
      },

组合requirejs包和requirejs优化器时的模块注入问题

1 个答案: