Angular2 troppe richieste di file sul carico

Sto facendo un sito web utilizzando Angular2 e sto avendo quello che suppongo è un problema. Al primo carico della mia pagina angular, SystemJS sta facendo più di 500 richieste per recuperare each file angular2/src nella directory angular2/src . In totale, il primo carico scarica più di 4 MB e richiede più di 14 secondi per iniziare.

Il mio index.html include i seguenti script:

 <script src="libs/angular2/bundles/angular2-polyfills.js"></script> <script src="libs/systemjs/dist/system.src.js"></script> <script src="libs/rxjs/bundles/Rx.js"></script> <script src="libs/angular2/bundles/angular2.min.js"></script> <script src="libs/angular2/bundles/http.dev.js"></script> <script src="libs/jquery/jquery.js"></script> <script src="libs/lodash/lodash.js"></script> <script src="libs/bootstrap/js/bootstrap.js"></script> 

E il mio codice di initialization del sistema sembra così:

  <script> System.config({ defaultJSExtensions: true, paths: { '*': 'libs/*', 'app/*': 'app/*' }, packageConfigPaths: ['libs/*/package.json'], packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app/main') .then(null, console.error.bind(console)); </script> 

La mia cartella pubblica ha la seguente struttura:

 . ├── img ├── styles ├── app ├── libs | └── angular2 | └── systemjs | └── rxjs | └── jquery | └── lodash | └── bootstrap └── index.html 

Un paio di schermate di alcuni dei file js che vengono richiesti: immettere qui la descrizione dell'immagine

    immettere qui la descrizione dell'immagine

    C'è un modo per evitare tutte queste richieste?

    Ho avuto lo stesso problema, stavo guardando a questo post per una risposta. Ecco cosa ho fatto per risolvere il problema.

    1. Modifica il tuo progetto per utilizzare il webpack. Segui questo breve tutorial: Angular2 QuickStart SystemJS To Webpack
    2. Questo metodo ti darà un singolo file javascript ma è abbastanza grande (il mio file di progetto è stato superiore a 5MB) e deve essere minificato. Per farlo ho installato webpack globaly: npm install webpack -g . Una volta installato, eseguire webpack -p dalla directory principale delle applicazioni. Questo ha portto la mia dimensione di file fino a circa 700KB

    Da 20 secondi e 350 richieste fino a 3 secondi e 7 richieste.

    Vedo che hai già una risposta, che è buono naturalmente. MA per coloro che vogliono usare systemjs (come lo faccio anche io), e non andare a webpack, è ancora ansible raggruppare i file. Comunque, coinvolge anche l'utilizzo di un altro strumento (uso del gulp). Quindi … avresti la seguente systemjs config (non in html, ma in un file separato – chiamiamo "system.config.js"):

     (function(global) { // map tells the System loader where to look for things var map = { 'app': 'dist/app', // this is where your transpiled files live 'rxjs': 'node_modules/rxjs', 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', // this is something new since angular2 rc.0, don't know what it does '@angular': 'node_modules/@angular' }; // packages tells the System loader how to load when no filename and/or no extension var packages = { 'app': { main: 'boot.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', // I still use "router-deprecated", haven't yet modified my code to use the new router that came with rc.0 '@angular/router-deprecated', '@angular/http', '@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); 

    Quindi, nel tuo gulpfile.js creerebbe un pacchetto come questo (utilizzando le informazioni provenienti tsconfig.json file system.config.js e tsconfig.json ):

     var gulp = require('gulp'), path = require('path'), Builder = require('systemjs-builder'), ts = require('gulp-typescript'), sourcemaps = require('gulp-sourcemaps'); var tsProject = ts.createProject('tsconfig.json'); var appDev = 'dev/app'; // where your ts files are, whatever the folder structure in this folder, it will be recreated in the below 'dist/app' folder var appProd = 'dist/app'; /** first transpile your ts files */ gulp.task('ts', () => { return gulp.src(appDev + '/**/*.ts') .pipe(sourcemaps.init({ loadMaps: true })) .pipe(ts(tsProject)) .pipe(sourcemaps.write('.')) .pipe(gulp.dest(appProd)); }); /** then bundle */ gulp.task('bundle', function() { // optional constructor options // sets the baseURL and loads the configuration file var builder = new Builder('', 'dist/system.config.js'); /* the parameters of the below buildStatic() method are: - your transcompiled application boot file (the one wich would contain the bootstrap(MyApp, [PROVIDERS]) function - in my case 'dist/app/boot.js' - the output (file into which it would output the bundled code) - options {} */ return builder .buildStatic(appProd + '/boot.js', appProd + '/bundle.js', { minify: true, sourceMaps: true}) .then(function() { console.log('Build complete'); }) .catch(function(err) { console.log('Build error'); console.log(err); }); }); /** this runs the above in order. uses gulp4 */ gulp.task('build', gulp.series(['ts', 'bundle'])); 

    Così, quando si esegue "build gulp", avrai il file "bundle.js" con tutto quello che ti serve. Certo, è anche necessario un paio di altri pacchetti per il lavoro del bundle gulp:

     npm install --save-dev github:gulpjs/gulp#4.0 gulp-typescript gulp-sourcemaps path systemjs-builder 

    Inoltre, assicuratevi che nel tuo tsconfig.json sia "module":"commonjs" . Ecco il mio tsconfig.json che viene utilizzato nel mio task 'ts' :

     { "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false }, "exclude": [ "node_modules", "typings/main", "typings/main.d.ts" ] } 

    Quindi, nel file html è necessario includere solo questo:

     <!-- 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="dist/app/bundle.js"></script> 

    E questo è … Ho da 600 richieste, 4mb in circa 5 secondi … a 20 richieste, 1,4mb in 1,6 secondi (macchina di sviluppo locale). Ma queste 20 richieste di ~ 1.4mb in 1,6 secondi includono anche altri js e css che sono stati forniti con il tema dell'amministratore e alcuni templates html richiesti al primo carico, preferisco utilizzare templates esterni – templateUrl: '', anziché quelli inline, scritti nel mio file component.ts. Certo, per un'applicazione che avrebbe milioni di utenti, questo non sarebbe ancora sufficiente. Anche il rendering lato server sul sistema di caricamento iniziale e cache dovrebbe essere implementato, in realtà è riuscito a farlo con universale angular, ma su Angular2 beta (ha impiegato circa 200-240 millisecondi per caricare il rendering iniziale della stessa applicazione di amministratore che superi 1,6 secondi – lo so: WOW! ). Ora è incompatibile dal momento che Angular2 RC è uscito, ma sono sicuro che i ragazzi che fanno universale lo faranno presto per accelerare presto, specialmente dal momento che ng-conf sta arrivando. Inoltre, stanno anche pianificando di rendere Angular Universal per PHP, ASP e qualche altro – adesso è solo per Nodejs.

    Edit: In realtà, ho appena scoperto che su NG-CONF hanno detto che Angular Universal support già ASP (ma non support Angular2> beta.15 :)) … ma dobbiamo dare loro un po 'di tempo, RC è giunto qualche giorno fa

    Penso che la tua domanda sia correlata a questa:

    • La mia applicazione angular 2 richiede molto tempo per caricare per gli utenti di prima volta, ho bisogno di aiuto per accelerarlo

    Per avere qualcosa di pronto per la produzione (e accelerarlo), è necessario confezionarlo.

    Voglio dire traspletare tutti i file in JavaScript e concateli allo stesso modo in cui Angular2 fa per esempio. In questo modo avrai più moduli contenuti in un singolo file JS. In questo modo si ridurrà il numero di chiamate HTTP per caricare il codice dell'applicazione nel browser.

    Ho trovato una soluzione semplice, utilizzando browserify & uglifyjs sul repository angular2-seed di mgechev

    Ecco la mia versione:

    pacakge.json:

     { ... "scripts": { "build_prod": "npm run clean && npm run browserify", "clean": "del /S/Q public\\dist", "browserify": "browserify -s main public/YourMainModule.js > public/dist/bundle.js && npm run minify", "minify": "uglifyjs public/dist/bundle.js --screw-ie8 --compress --mangle --output public/dist/bundle.min.js" }, ... "devDependencies": { "browserify": "^13.0.1", "typescript": "^1.9.0-dev.20160625-1.0", "typings": "1.0.4", "uglifyjs": "^2.4.10" } } 
    1. Costruisci il tuo progetto.
    2. Esegui: npm eseguire build_prod Crea bundle.js & bundle.min.js sotto la directory public \ dist.
    3. Modifica il tuo file index.html : invece di eseguire System.import('YourMainModule')... , aggiungi <script src="/dist/bundle.min.js"></script>

    Al primo carico della mia pagina angular, systemjs sta facendo più di 500 cento richieste per recuperare each file angular2 nella directory angular2 / src. In totale, il primo carico scarica più di 4mb e richiede più di 14 minuti per iniziare.

    I flussi di lavoro SystemJs sono abbastanza nuovi e non hanno abbastanza ricerche in loro per la migliore distribuzione.

    Suggerisci di tornare a commonjs + webpack . Altro: https://basarat.gitbooks.io/typescript/content/docs/quick/browser.html

    Ecco un esempio: https://github.com/AngularClass/angular2-webpack-starter

    @ FreeBird72 La tua risposta è impressionante.

    Se si desidera utilizzare SystemJS per lo sviluppo e accelerare il server di produzione come me. Controllalo.

    NOTA: importre solo i componenti utilizzati, NON importre da tutto il pacchetto.

    Ad esempio: se si desidera utilizzare Modal da ng2-bootstrap.

     import {MODAL_DIRECTIVES} from "ng2-bootstrap/components/modal"; 

    Invece di:

     import {MODAL_DIRECTIVES} from "ng2-bootstrap/ng2-bootstrap"; 

    Questo importerà la componente modale anziché l'integer bootstrap ng2

    Seguite quindi la risposta da @ FreeBird72

    Aggiungi questo package.json

     { ... "scripts": { ... "prod": "npm run tsc && npm run browserify", "browserify": "browserify -s main dist/main.js > dist/bundle.js && npm run minify", "minify": "uglifyjs dist/bundle.js --screw-ie8 --compress --mangle --output dist/bundle.min.js", ... }, "devDependencies": { ... "browserify": "^13.0.1", "uglifyjs": "^2.4.10", ... } ... } 

    Quindi puoi npm run tsc su sviluppo e npm run prod sul server di produzione Rimuovere anche System.import(.... dal tuo index.html e cambiarlo in <script src="/dist/bundle.min.js"></script>

    Se si desidera attaccare con SystemJS, è ansible raggruppare l'applicazione con JSPM . Ho avuto un buon successo con questo finora, utilizzando il command bundle-sfx di JSPM per creare singoli file JS per le applicazioni Angular 2.

    C'è qualche informazione utile in questo Gist , e c'è un progetto di semi.

    Sto usando la versione di AG2 RC Durante l'utilizzo della soluzione di MrCroft con systemjs-builder, stavo colpendo un sacco di problemi come: errore TS2304: Imansible trovare l'errore di nome 'Mappa' TS2304: Imansible trovare il nome 'Promessa' …

    Dopo molti tentativi, ho aggiunto: ///<reference path="../../typings/index.d.ts" /> nel mio boot.ts e ora ho compilato il mio file di bundle.

    L'interface a row di command Angular ora support il raggruppamento (con trecce di alberi per eliminare il codice non utilizzato dalle importzioni), la minificazione e la compilazione dei templates in tempo reale, che non solo riduce notevolmente il numero delle richieste fatte, ma rende anche molto il bundle piccolo. Utilizza WebPack sotto.

    È incredibilmente facile fare build la produzione con esso:

     ng build --prod --aot 

    https://github.com/angular/angular-cli