angular2 bundle用于使用systemjs减少httprequests

Question

我希望坚持Systemjs而不是使用Webpack才能使用angular2。但当我从angular.io运行quickstart示例时，我看到了非常多的httprequest（大约40个http请求），我知道大部分都是针对rxjs包的

我看到了类似的问题和答案，但没有一个是完整的答案，对我来说不起作用。即时通讯使用角度版本2.2。我的systemjs配置：

(function (global) {

  global.ENV = global.ENV || 'development';


  var config = {
paths: {
  // paths serve as alias
  'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
  // our app is within the app folder
  app: 'app',

  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

  // other libraries
  'rxjs':                      'npm:rxjs',
  'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
  dist: {
    main: './app/main.js',
    defaultExtension: 'js'
  },
  rxjs: {
    defaultExtension: 'js'
  }
}
  }

  System.config(config);
})(this);

和我从gxjs和angular：

构建bundle的gulp任务

gulp.task('bundle-ng', function() {

  var builder = new Builder('', 'systemjs.config.js');

  return builder
    .bundle('./dist/app/**/* - [@angular/**/*.js] - [rxjs/**/*.js]', 'bundles/app.bundle.js', { minify: true})
    .then(function() {
      console.log('Build complete');
    })
    .catch(function(err) {
      console.log('Build error');
      console.log(err);
    });
});

我的打字稿文件位于./app文件夹中 和gulp将它转换为js并将其放在./dist/app下 我不知道如何使用和捆绑它。感谢

Answer 1

最后找到了干净的解决方案：大多数请求都是针对rxjs的，如果我们捆绑了那些脚本，那么请求会减少（大约20个http请求）以便捆绑rxjs我们可以使用{{1}像这样的gulp任务：

systemjs-builder

然后在index.html中包含捆绑文件：

gulp.task('bundle-rx', function() {

// SystemJS build options.
  var options = {
    normalize: true,
    runtime: false,
    sourceMaps: true,
    sourceMapContents: true,
    minify: true,
    mangle: true
  };
  var builder = new Builder('./');
  builder.config({
    paths: {
      "n:*": "node_modules/*",
      "rxjs/*": "node_modules/rxjs/*.js",
      "@angular" : "node_modules/@angular/*.js"
    },
    map: {
      "rxjs": "n:rxjs",
    },
    packages: {
      "rxjs": {main: "Rx.js", defaultExtension: "js"},
    }
  });

  builder.bundle('rxjs', './bundles/Rx.js', options)


});

并删除systemjs.config.js文件中rxjs的每个引用，它应该没问题。然后为了获得更好的性能，我们应该捆绑静态脚本，如：

<script src="./bundles/Rx.js"></script>

为此我们创建了另一个gulp任务：

  'node_modules/core-js/client/shim.min.js',
  'node_modules/zone.js/dist/zone.js',
  'node_modules/reflect-metadata/Reflect.js',
  'node_modules/systemjs/dist/system.src.js'

然后我们的httprequests计数将会减少