Quando usare Requirejs e quando usare javascript in bundle?

Questa potrebbe essere una domanda stupida per i ragazzi del web. 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?

Per favore fatemi sapere se sono necessari ulteriori dettagli.

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 best practice esatte, ma quelli che apprezzano la natura più funzionale di Javascript preferiscono spesso l’approccio di caricamento del modulo (come usi require.js).

Ho scritto Frame.js che funziona molto come require.js, quindi il mio pregiudizio è verso l’approccio del caricatore di moduli.

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

La maggior parte di quelli che argomentano per il fatto 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.

A lungo termine, se si può vedere un vantaggio per il caricamento dinamico dello script usarlo. In caso contrario, raggruppa i tuoi script in un unico file.

Generalmente usi RequireJS solo nel suo 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 cosa dice sul sito Web RequireJS :

Una volta terminato lo sviluppo e si desidera distribuire il codice per gli utenti finali, è ansible utilizzare l’ottimizzatore per combinare insieme i file JavaScript e ridimensionarlo. Nell’esempio sopra, può combinare main.js e helper / util.js in un unico file e minimizzare il risultato.

Dipende dalla tua 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 colors, il trascinamento / rilascio, 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, posso superare un meg di javascript, il che sarebbe folle e rendere il boot iniziale inaccettabilmente lento.

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

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