Si basa su pochi file di grandi dimensioni, in quanto le dipendenze sono efficienti?

Question

Sto sviluppando un'applicazione Web con molte dipendenze di javascript e css di terze parti. Da quando ho scoperto Node.js, bower e gulp, trovare e installare tali dipendenze è stato un gioco da ragazzi. Tuttavia, ho perseguito in modo aggressivo una politica di concatenazione di tutti i miei javascript in un singolo file e idem per tutti i miei fogli di stile. Dopo la concatenazione e la minimizzazione, la mia applicazione web dipende solo da due file abbastanza grandi (main.js e main.css). Per riferimento, il mio file main.js ha una dimensione di 1,6 MB e il mio file main.css ha una dimensione di 261 KB. Non enorme in alcun modo, ma molto più grande di ogni singola dipendenza personale. È ottimale o le dimensioni crescenti di questi file superano l'ottimizzazione ottenuta facendo meno richieste? C'è uno scenario in cui questa strategia sarebbe una cattiva idea?

Answer 1

Sì. Il non consolidamento delle risorse comporta un sovraccarico della rete. Ma quando il j diventa così grande, dovrebbe essere diviso.

Tutti i principali browser preload script e css. Quindi, se dividi il tuo js 1,6 MB in 3, il browser caricherà tutti e tre i css insieme in 4 connessioni.

Si può pensare che la larghezza di banda totale sia la stessa, quindi perché preoccuparsi? Ma potrebbe essere più veloce, perché:

1. Disegna più larghezza di banda dal server.
2. Disegna più larghezza di banda da altri programmi/servizi.
3. Disegna più larghezza di banda da altre schede nello stesso browser.
4. Le parti possono essere analizzate e possono essere eseguite quando altre parti sono ancora in fase di download.
5. Se si aggiorna solo una delle parti, le altre parti possono essere lette dalla cache.

1,6 MB è molto grande e dovresti vedere un miglioramento della velocità se lo dividi. Ma il punto debole dipende da molti fattori, quindi è necessario sperimentare per vedere quale dimensione della parte funziona meglio per voi.

In effetti, è così grande che dovresti rimandare la sceneggiatura, come ha commentato Mr_Green. Lascia che css e html inizino per primi, mostra un'icona di caricamento e carica i tuoi grandi script.