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

我想坚持使用Systemjs而不是使用Webpack以便使用angular2。但是当我从angular.io跑了快速入门示例，我看到大量的HttpRequest（约40 HTTP请求）我知道大部分是rxjs包 angular2捆绑包，用于减少httprequests与systemjs

我看到了类似的问题和答案，但他们都不是完整的答案并没有为我工作。 IM采用了棱角分明的版本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);

，并建立从rxjs束和角度我一饮而尽任务：

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文件夹和一饮而尽将它传递给js并放在./dist/app 我不知道如何使用和捆绑它。由于

来源

2016-12-08 Mohammad Reza Farahani

终于找到了干净的解决方案：大多数的这些要求是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>

并删除systemjs.config.js文件rxjs的每一个参考并且应当然后fine.And为BETT呃表现，我们应该捆绑静态脚本，如：

'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.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的计数将很多

减少

来源

2016-12-08 19:49:19

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

回答

相关问题