2017-03-30 4 views
1

Ich bin ziemlich neu in Front-End-Entwicklung und einige Probleme mit angular2 App.Angular 2 Polyfills Initialisierung dauert zu lange

Wie Sie die Timeline-Capture unten sehen können, polyfills taks zu lange Zeit (fast 6 Sekunden!) chrome timeline Es scheint kein normal. aber ,, ich habe keine Ahnung, was ich tun kann, um diese Polyfill-Zeit zu verringern.

Einige Zeilen des Conf.

// Add build specific plugins 
    if (ENV === 'build') { 
    config.plugins.push(
     // Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin 
     // Only emit files when there are no errors 
     new webpack.NoErrorsPlugin(), 

     // Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin 
     // Dedupe modules in the output 
     new webpack.optimize.DedupePlugin(), 

     // Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin 
     // Minify all javascript, switch loaders to minimizing mode 
     new webpack.optimize.UglifyJsPlugin({ 
      compress: { warnings: false } 
     }) 
    ); 
    } 

Ganze webpack.config.js verwende ich in meiner App. https://gist.github.com/jeesim2/484186d630fedc9f42e264ca905ad123

Meine abgewinkelte Ausführung

"@angular/common": "^2.0.1", 
"@angular/compiler": "^2.0.1", 
"@angular/core": "^2.0.1", 
"@angular/forms": "^2.0.1", 
"@angular/http": "^2.0.1", 
"@angular/platform-browser": "^2.0.1", 
"@angular/platform-browser-dynamic": "^2.0.1", 
"@angular/router": "^3.0.1", 

webpack.optimize.UglifyJsPlugin verminderte Packungsgröße auf 70%, aber Seite Ladegeschwindigkeit nicht schneller wurde erhalten. enter image description here

Was verursacht diese lange Seite laden?

Antwort

0

Willkommen bei angular2 einzelne Seite App :). A2 ist immer noch IMHO im Entwicklungsstadium. Dieses Verhalten ist normal, abhängig von Betriebssystem/Browser/Komponenten. Das Rendering dauert einige Sekunden. Da die gebündelte Datei mit A2/Vendoren/Polyfills ungefähr 800kb + (minimal) ist, dauert es einige Zeit, bis alles im Browserspeicher gelesen ist.

Sie können überprüfen, ob das Rendern ziemlich schnell ausgeführt wird, aber Skripts können nach der Initialisierung einige Sekunden lang im Hintergrund ausgeführt werden. Selbst auf schnellen PCs braucht es etwas Zeit.

Es wird von https://github.com/angular/zone.js/

getan