2012-09-02 11 views
74

Questa potrebbe essere una domanda stupida per i web ragazzi. Ma sono un po 'confuso su questo. Ora, ho un'applicazione in cui sto usando un paio di file Javascript per eseguire compiti diversi. Ora, sto usando Javascript bundler per combinare e minimizzare tutti i file. Quindi, durante il runtime ci sarà solo un file app.min.js. Ora, Requirejs viene utilizzato per caricare moduli o file in fase di runtime. Quindi, la domanda è se ho già tutte le cose in un file, quindi ho bisogno di requirejs? O qual è uno scenario di casi d'uso in cui posso usare requirejs e/o bundler?Quando usare Requirejs e quando usare javascript in bundle?

Per favore fatemi sapere se sono necessari ulteriori dettagli.

+1

Non vedo perché avresti bisogno di entrambi. Pensi che lo faresti? – nnnnnn

+2

Questa è una confusione. Quando usare cosa? O hai solo bisogno di sceglierne uno? – kunjee

risposta

27

Questo è un problema molto contestato tra molti abili sviluppatori di javascript. Molti altri linguaggi hanno una fase di "compilazione" in cui l'intero programma è raggruppato per l'implementazione (i file .WAR di JBoss vengono in mente). I programmatori che provengono da background più tradizionali spesso preferiscono questo approccio.

JavaScript ha visto una tale crescita negli ultimi anni che è difficile tracciare le migliori pratiche esatte, ma quelle che apprezzano la natura più funzionale di Javascript preferiscono spesso l'approccio di caricamento del modulo (come require.js utilizza).

Ho scritto Frame.js che funziona molto come require.js, quindi la mia preferenza è verso l'approccio del caricatore di moduli.

Per rispondere direttamente alla tua domanda, sì, è l'una o l'altra.

La maggior parte di coloro che sostengono di impacchettare gli script in un singolo file credono che consenta una maggiore compressione ed è quindi più efficiente. Credo che i vantaggi di efficienza dell'imballaggio siano trascurabili nella maggior parte dei casi perché: (1) i tempi di caricamento dei moduli sono distribuiti sull'intera sessione, (2) i singoli moduli possono essere compressi quasi alla stessa percentuale, (3) i singoli moduli possono essere memorizzati nella cache da il server e i router separatamente e (4) il caricamento degli script solo quando sono necessari in ultima analisi consente di caricare meno codice per alcuni utenti e più codice in generale.

Nel lungo periodo, se è possibile vedere un vantaggio per il caricamento dinamico dello script, utilizzarlo. In caso contrario, raggruppa i tuoi script in un unico file.

+5

Pur comprendendo i vantaggi di tenere separati i file, penso che il raggruppamento riduca anche il numero di connessioni http richieste. Poiché il pipelining nei browser e nei server diventa più ampiamente disponibile, questo può essere meno importante, ma attualmente è un grosso problema. –

+4

L'overhead della connessione http può essere montato rapidamente se l'app è di grandi dimensioni. Per la nostra app, quando la eseguiamo in modalità scompatta e carichiamo ogni file JS singolarmente, ci vogliono circa 15-30 secondi per caricare la pagina. In modalità compressa è di circa un secondo. –

+0

un singolo file, in cache, è ovviamente molto più veloce del recupero di dozzine o centinaia di file, che non puoi mai essere sicuro che siano stati caricati, o quanto tempo ci vuole per caricarli. è quindi meglio scaricare tutto sul client. nella maggior parte dei casi questo singolo file non ha comunque superato la dimensione di 1 Mb, probabilmente molto meno dopo essere stato minificato e gzip. quindi, FTW a file singolo. – vsync

46

In genere si utilizza RequireJS solo nel modulo di caricamento durante lo sviluppo. Una volta che il sito è pronto e pronto per la distribuzione, si minimizza il codice. Il vantaggio qui è che RequireJS sa esattamente quali sono le tue dipendenze e quindi può facilmente minimizzare il codice nell'ordine corretto. Ecco quello che dice sulla RequireJS website:

Una volta che hai finito di fare sviluppo e desidera distribuire il codice per gli utenti finali, è possibile utilizzare l'ottimizzatore di combinare file insieme il Javascript e minify esso. Nell'esempio sopra, può combinare main.js e helper/util.js in un unico file e minimizzare il risultato.

+4

So che questo è un vecchio thread, ma sono inciampato perché avevo dubbi simili. Quindi, una domanda successiva, se non ti dispiace - se finalmente uniamo tutto in un unico file per la distribuzione, tutta la mia applicazione si carica in un colpo invece che in modo frammentario (su richiesta). Non è contraddittorio con AMD? –

+5

sì, è, in un certo senso. Ma AMD è più teorico, dove come requirejs si occupa anche di problemi di prestazioni del mondo reale. Caricare ogni modulo singolarmente è sicuramente più pulito e più puro, ma richiederà sempre :) –

+1

Ho anche posto questa domanda a SO, vedi http://stackoverflow.com/questions/20515679/requirejs-to-bundle-or-not-to- fascio/20518314? noredirect = 1 # 20518314. Forse un punto intermedio tra i due approcci? –

11

Dipende dalla vostra applicazione. Se stai realizzando un'app lato server con un javascript solo modesto (meno di 100kb minified), allora vai per il bundling totale, probabilmente starai bene.

Ma se stai facendo un'applicazione javascript e hai un sacco di codice, le tue esigenze saranno diverse.

Ad esempio, nella mia app impacchetta tutti i file core. C'è jQuery, underscore, backbone, i miei file di app principali, il mio sistema di login utente, il mio sistema di layout, le mie notifiche e il sistema di chat, tutti fanno parte del mio grande file iniziale.

Ma ho anche molti altri moduli che non fanno parte del pacchetto iniziale, che vengono caricati dopo quelli.

I forum, il wiki, il wysiwyg, il selettore di colori, il trascinamento, il calendario e alcuni file di animazione fanno parte della seconda categoria. È necessario prendere decisioni ragionevoli su ciò che è comunemente usato e necessario immediatamente rispetto a ciò che può essere ritardato.

Se includo tutto immediatamente, è possibile ottenere un meg di un javascript, che sarebbe insano e rendere il boot iniziale inaccettabilmente lento.

La seconda categoria inizia a scaricare dopo initSuccess eventi generati dal file iniziale.

Ma la seconda categoria è più intelligente della prima in quanto carica prima quello che è più importante. Ad esempio se stai guardando il wiki caricherà la wiki prima che carichi il selettore di colori.