用于使用 systemjs 减少 httprequests 的 angular2 包

Question

我想坚持使用 Systemjs 而不是为了使用 angular2 而使用 Webpack 。但是当我运行来自 angular.io 的快速入门示例时，我看到了大量的 httprequest（大约 40 个 http 请求）我知道其中大部分是针对 rxjs 包的

我看到了类似的问题和答案，但其中 none 是完整的答案，对我不起作用。我正在使用 angular 版本 2。2.here 是我的 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);

和我的 gulp 从 rxjs 构建包的任务和 angular:

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 将 t运行spile 到 js 并将其放在 ./dist/app 下我不知道如何使用和捆绑它。谢谢

Answer 1

终于找到了干净的解决方案：这些请求中的大多数都是针对 rxjs 的，如果我们捆绑脚本然后请求减少（大约 20 个 http 请求）以便捆绑 rxjs 我们可以使用 systemjs-builder 和这样的 gulp 任务：

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)


});

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

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

并删除 systemjs.config.js 文件中对 rxjs 的所有引用，它应该是 fine.And 然后为了更好的性能，我们应该捆绑静态脚本，如：

  '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'

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

gulp.task('build-vendor',function(){
  var concat = require("gulp-concat");

  gulp.src([
      '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'
    ])
    .pipe(uglify())
    .pipe(concat("vendor.min.js"))
    .pipe(gulp.dest("./bundles/"))


})

那么我们的 httprequests 数量会减少很多

用于使用 systemjs 减少 httprequests 的 angular2 包

angular2 bundle for reduce httprequests with systemjs

bundle

systemjs

angular