Angular2 çekirdeği sayfa yüklemesinde düzinelerce HTTP isteği nasıl önlenir?

Question

Yani bir Angular2 uygulama geliştiriyorum ve sadece Angular2 işe koşulması ile, neredeyse her @angular/core düğüm modülü paketinde dosya mevcut js 250 istekleri üzerinden gönderilen ediyorum:

Özellikle, her şey görünüyor zone.js:101'dan içe aktarılacak. İşte

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

bootstrap(LiveComponent); 

benim HTML: İşte benim uygulama giriş noktasıdır, sadece ben alışılmadık bir şey yapmıyorum gösteri yapmasını

<!-- 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> 

Ve systemjs.config.js geçerli:

(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's chance to modify config before we register it. 
    if (global.filterSystemConfig) { global.filterSystemConfig(config); } 

    System.config(config); 

})(this); 

neler var Buraya mı gidiyorsun?

Answer 1

O kurulum sadece gelişimi içindir. Üretim için bir grup oluşturmanız gerekir. SystemJS, SystemJS Builder ürününe sahiptir.

JSPM size daha fazla seçenek verecektir.

DÜZENLEME yorum cevaplamak için:

Evet, bir yapı adımdır. Bu seed projesinde, ön ucu oluşturmak için gulp, TypeScript, TSLint, SystemJS ve JSPM kullanılmıştır. Bu gelişme yapısı ve production derlemesi için farklı yudum konfigürasyonları vardır. Ayrıca, bu tohum projesinde package.jsonbağımlılıklarının bölümünün boş olduğunu göreceksiniz. Bunun nedeni bağımlılıkları yönetmek için JSPM (this config) kullanıyor olmasıdır.

Şimdi bundler size kod tarafından kullanılan import {} from 'dependency' s takip edecek ve sadece gerçekten kullanılan ne demetine ekleyin. ~ 60

Answer 2

İşte https://angular.io/guide/quickstart

resmi klavuzdaki yeni systemjs yapılandırma yoktur

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

yüzden onların UMD grubu kullanabilir kopyasıdır ve ben yaklaşık ~ 400 isteklerinden, denedim istekleri.