Question

我已经安装了新版本RC Angular 2.一切正常，但我对角度依赖的请求非常糟糕。我明白，然后系统js异步加载这个依赖项，但我还有285个请求！这真的需要吗？完成转移大约3.3MB，这对我来说非常糟糕。我有办法，如何更有效地做到这一点？

这是我的System JS配置：

(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捆绑

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",

我已经缩小了所有捆绑包，但网络流量仍然如下：

感谢您的时间。

Answer 1

将Systemjs-builder与Gulp一起使用，您可以将Angular 2与您的应用代码捆绑在一起，并将其他库分开捆绑。

我将直接在HTML中引用的任何库捆绑到vendors.min.js中，并将通过我的system.config.js和app代码引用的任何库引入app.min.js.在此example中，您可以看到“英雄之旅”中的所有依赖项都加载到＆lt; 10个网络请求（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
});

Angular 2 - 太多的包依赖

1 个答案: