Как предотвратить создание 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 запросов.