Как предотвратить создание Angular2 ядра, создающего десятки HTTP-запросов при загрузке страницы?

Итак, я разрабатываю приложение Angular2, а просто загружая Angular2, я отправил более 250 запросов почти для каждого файла js, присутствующего в пакете модулей @angular/core node:

В частности, все, кажется, импортируется из zone.js:101. Вот моя точка входа в приложение, чтобы продемонстрировать, что я не делаю ничего необычного:

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { LiveComponent } from './components/live.component';

bootstrap(LiveComponent);

Вот мой HTML:

<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>

<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

<!-- 2. Configure SystemJS -->
<script src="js/systemjs.config.js"></script>
<script>
    System.config({
       defaultJSExtensions: true
    });
    System.import('js/angular2/main').catch(function(err){ console.error(err);  });
</script>

И вот systemjs.config.js:

(function(global) {

    // map tells the System loader where to look for things
    var map = {
        'app':                        'app', // 'dist',
        'rxjs':                       'node_modules/rxjs',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        '@angular':                   'node_modules/@angular'
    };

    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app':                        { main: 'main.js',  defaultExtension: 'js' },
        'rxjs':                       { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { 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' };
    });

    var config = {
        map: map,
        packages: packages
    }

    // filterSystemConfig - index.html chance to modify config before we register it.
    if (global.filterSystemConfig) { global.filterSystemConfig(config); }

    System.config(config);

})(this);

Что здесь происходит?

Ответ 1

Эта настройка предназначена только для разработки. Для производства вам необходимо создать пакет. SystemJS имеет SystemJS Builder.

JSPM предоставит вам больше возможностей.

EDIT, чтобы ответить на ваш комментарий:

Да, это шаг сборки. Этот проект seed использует gulp, TypeScript, TSLint, SystemJS и JSPM для создания интерфейса. Он имеет различные конфигурации gulp для сборки разработки и production build.

Кроме того, в этом проекте семени вы увидите, что раздел зависимостей package.json пуст. Это связано с тем, что он использует JSPM (эту конфигурацию) для управления зависимостями.

Теперь связующее будет следовать import {} from 'dependency', используемому вами кодом, и только добавляет к набору то, что действительно использовалось.

Ответ 2

Существует новая системная конфигурация в официальном быстром старте https://angular.io/guide/quickstart

Вот копия

// Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });

Итак, мы можем использовать их комплект UMD, и я попробовал его, от ~ 400 запросов до ~ 60 запросов.