Angolare 2 Avvio caricamento iniziale

Ho fatto del mio meglio per ridurre la dimensione del fascio di Angular 2 e sono riuscito a ridurre le dimensioni a ~ 300kb (Angular 2 + jquery + bootstrap + alcune altre piccole librerie di terze parti) usando Browserify + Rollup + Minify + GZIP ma anche con questa dimensione, ci vuole ancora un po 'per scaricare il bundle e poi c'è il tempo di caricamento iniziale per reflect e zone.js da prendere in considerazione, il che significa che può richiedere fino a 4-5 secondi su dispositivi più lenti (telefoni cellulari) per caricare il sito.Angolare 2 Avvio caricamento iniziale

Mentre capisco che questo è inevitabile (almeno per ora), c'è un modo per mostrare l'avanzamento del caricamento per il carico iniziale in termini di percentuale di inizializzazione download + reflect/zone.js?

maggior parte degli esempi fuori ci sono in questo modo:

<body> 
    <my-app>Loading...</my-app> 
</body>

che sta lavorando e la Loading... possono essere sostituiti da una filatrice o qualunque modello personalizzato si potrebbe scegliere, ma c'è un modo per ottenere l'avanzamento effettivo in modo significativo?

Quello che sto cercando è qualcosa come lo stato di caricamento di Gmail che è una barra di avanzamento effettiva con min/max e non un certo spinner indeterminato in modo che gli utenti possano avere qualche forma di indicazione su quanto tempo dovranno attendere il caricamento del sito.

Molte grazie in anticipo,

aggiornamento (24-Ott-2016)

ho iniziato a utilizzare NGC per ahead-of-time compilazione (https://angular.io/docs/ts/latest/cookbook/aot-compiler.html), che ha accelerato le cose un po ' (anche se le dimensioni del bundle sono aumentate a ~ 500kb compresse) ma ci vogliono ancora ~ 300ms per caricare il sito Web dopo che tutto è stato scaricato.

Idealmente, vorrei essere in grado di intercettare sia il download e il processo di caricamento, indagare il loro stato (ad esempio, 230kb/500kb scaricato o il 10% di compilazione del modulo completo) e quindi caricare una barra di avanzamento e uno stato barra che in realtà dà qualche indicazione all'utente che cosa stanno aspettando.

Quello che ho attualmente è di caricare un CSS minimo per una barra di avanzamento, mostrarlo e quindi caricare tutte le cose angolari in ordine sulla funzione e mentre è molto più agevole di prima, non è ancora ovvio per quanto tempo il l'utente dovrà aspettare - essere da mezzo secondo a pochi secondi a seconda della connessione Internet e delle funzionalità del dispositivo.

fonte

2016-07-11 kha

Buona domanda, ma penso che una soluzione generica (potresti usare il rollup, qualcun altro potrebbe usare il webpack, ecc.) È complicata? Probabilmente richiede un po 'di aiuto/api/gancio angolare perché funzioni anche lui. –

hai provato la compilazione AOT? (per l'ottimizzazione della velocità) –

@redaigbaria che ho.È decisamente più veloce, ma preferirebbe avere una barra di avanzamento con uno stato significativo per i 2 secondi o così si impiegano dispositivi più lenti. – kha

io non sono sicuro di riflettere/zone.js, ma per il download possiamo seguire questa

<body onload="showApp()"> 
    <div class="progress-bar" id="loadingContainer"></div> 
    <my-app style="display: none"><my-app> 
</body> 

showApp() { 
    document.getElementById('loadingContainer').style.display = "none"; 
    document.getElementsByTagName('my-app')[0].style.display = null; 
}

fonte

2016-10-23 17:40:06 Eswar

Si potrebbe provare ad aggiungere un secondo script nella vostra index.html, che sarebbe poi caricare tutti gli altri file (proprio come sta facendo lo index.html adesso). Quindi avresti un sacco di richieste AJAX per i tuoi file e potresti aggiungerli al DOM. Per tenere traccia dell'avanzamento, puoi provare a utilizzare una richiesta HEAD HTTP con l'intestazione Content-Length.

fonte

2018-02-27 22:17:55

Angolare 2 Avvio caricamento iniziale

risposta

Problemi correlati