angular2捆绑包，用于使用systemjs减少httprequests

我想坚持使用

Systemjs

，而不是为了使用

angular2

而使用

Webpack

。但当我从

angular.io

运行quickstart示例时，我看到了大量的httprequest（大约40个http请求），我知道大部分是针对rxjs包的

我看到了类似的问题和答案，但没有一个是完整的答案，对我不起作用。我使用angular版本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);

以及我从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);
    });
});

我的typescript文件位于./app文件夹中 gulp会将其传输到js并将其置于./dist/app下

---

我不知道如何使用和捆绑它。感谢

终于找到了干净的解决方案：大多数请求都是针对

rxjs

的，如果我们捆绑这些脚本，那么请求就会减少（大约20个http请求），为了捆绑

rxjs

，我们可以使用

systemjs builder

和类似以下的吞咽任务：

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>

为此，我们创建了另一个吞咽任务：

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数量会大大减少，最终找到了干净的解决方案：大多数请求都是针对

rxjs

的，如果我们捆绑这些脚本，那么请求就会减少（大约20个http请求），为了捆绑

rxjs

，我们可以使用

systemjs builder

和这样的一个吞咽任务：

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>

为此，我们创建了另一个吞咽任务：

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数量就会大大减少