0

我目前正在尝试提高一个相当大的 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中。

我app.js在 src 文件夹中看起来或多或少是这样的：

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 路径的，而运行应用程序的路径是相对于相应文件的。

由于包配置是由 requirejs 自动生成的（因为 bundlesConfigOutFile），所以我不能对那里使用的名称做很多事情，因为它们是从模块选项中提取的。

生成并包含在 app.js 中的 bundles 配置如下所示：

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

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

为了解决这个问题，我baseUrl = '/'在require.configofapp

但是现在我有一个问题，即testservice无法注入app_miniand 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(){});
 
})();
4

1 回答 1

0

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

所以问题只是我完全错过了传递 shim 配置，它允许 require 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: {
            } 
          },
        }
      },
于 2017-01-05T11:52:44.963 回答