Angular 2 - too many package dependencies - node.js

Question

I have installed new version RC Angular 2. Everything works fine, but my requests for angular dependencies are very bad. I understand, then system js is loading this dependencies asynchronous, but I have still 285 requests! Is it all really needed? Complete transferred is about 3.3MB, it is very bad for me. I there way, how to do it more efficiently?
Here is my System JS config:
(function (global) {
// map tells the System loader where to look for things
var map = {
'input': '/js/components', // 'dist',
'rxjs': '/rxjs',
'angular2-in-memory-web-api': '/angular2-in-memory-web-api',
'#angular': '/#angular',
'primeng': '/primeng'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'input': { main: 'boot.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
'primeng': { defaultExtension: 'js' }
};
// meta tells the System loader how to load dependencies. In this case for custom scripts it is Global -> <script ... />
var meta = {
'/js/javascript.min.js': { format: 'global' },
'/js/angularDep.min.js': { format: 'global' }
}
var packageNames = [
'#angular/core',
'#angular/platform-browser-dynamic',
'#angular/compiler',
'#angular/platform-browser',
'#angular/common'
// '#angular/compiler',
// '#angular/core',
// '#angular/http',
// '#angular/platform-browser',
// '#angular/platform-browser-dynamic',
// '#angular/router',
// '#angular/router-deprecated',
// '#angular/testing',
// '#angular/upgrade'
];
// add package entries for angular packages in the form '#angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function (pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages,
meta: meta
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
angularDep bundle
paths.documentRoot + "scripts/vendor/es6-shim/es6-shim.js",
paths.documentRoot + "scripts/vendor/zone.js/zone.js",
paths.documentRoot + "scripts/vendor/reflect-metadata/Reflect.js",
All bundles I have minified, but network trafic still look like this:
Thanks for your time.

Answer 1

Using systemjs-builder with Gulp you can bundle Angular 2 with your app code and bundle your other libraries separately.
I bundled any library I would reference directly in HTML into a vendors.min.js, and any library referenced through my system.config.js plus app code into an app.min.js. In this example you can see that all the dependencies in Tour of Heroes are loaded into the page in <10 network requests (source code).
gulpfile.js
// Bundle dependencies into vendors file
gulp.task('bundle:libs', function () {
return gulp.src([
'node_modules/jquery/dist/jquery.min.js',
'node_modules/bootstrap/dist/js/bootstrap.min.js',
'node_modules/semantic-ui/dist/semantic.min.js',
'node_modules/es6-shim/es6-shim.min.js',
'node_modules/es6-promise/dist/es6-promise.min.js',
'node_modules/systemjs/dist/system.src.js',
'system.config.js',
])
.pipe(concat('vendors.min.js'))
.pipe(uglify())
.pipe(gulp.dest('public/lib/js'));
});
// Compile TypeScript to JS
gulp.task('compile:ts', function () {
return gulp
.src([
"src/**/*.ts",
"typings/*.d.ts"
])
.pipe(tsc({
"module": "system",
"moduleResolution": "node",
"outDir": "public/dist/js",
"target": "ES5"
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('public/dist'));
});
// Generate systemjs-based builds
gulp.task('bundle:js', function() {
var builder = new sysBuilder('public', './system.config.js');
return builder.buildStatic('app', 'public/dist/js/app.min.js');
});
// Minify JS bundle
gulp.task('minify:js', function() {
return gulp
.src('public/dist/js/app.min.js')
.pipe(uglify())
.pipe(gulp.dest('public/dist/js'));
});
gulp.task('scripts', ['compile:ts', 'bundle:js', 'minify:js']);
system.config.js
// map tells the System loader where to look for things
var map = {
'app': 'dist/js',
'rxjs': 'lib/js/rxjs',
'zonejs': 'deps/zone.js/dist',
'crypto': '#empty',
'reflect-metadata': 'lib/js/reflect-metadata',
'#angular': 'lib/js/#angular',
'ng2-translate': 'lib/js/ng2-translate',
'angular2-infinite-scroll': 'lib/js/angular2-infinite-scroll',
'lodash': 'lib/js/lodash',
'moment': 'lib/js/moment',
'angular2-moment': 'lib/js/angular2-moment',
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'zonejs': { main: 'zone', defaultExtension: 'js' },
'reflect-metadata': { main: 'Reflect', defaultExtension: 'js' },
'moment': { main: 'moment', defaultExtension: 'js' },
'angular2-moment': { main: 'index', defaultExtension: 'js' },
'angular2-infinite-scroll': { main: 'angular2-infinite-scroll', defaultExtension: 'js' },
'lodash': { main: 'index', defaultExtension: 'js' },
'ng2-translate': { main: 'ng2-translate', defaultExtension: 'js' },
};
var packageNames = [
'#angular/common',
'#angular/compiler',
'#angular/core',
'#angular/http',
'#angular/platform-browser',
'#angular/platform-browser-dynamic',
'#angular/router',
'#angular/router-deprecated',
'#angular/testing',
'#angular/upgrade',
];
// add package entries for angular packages in the form '#angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
System.config({
map: map,
packages: packages
});