utilizzando il chunking del webpack con es6

Question

Sto costruendo un'app Web (reagisci app scritta in es6) che sta iniziando a diventare piuttosto grande. Di conseguenza, sto vedendo tempi di download inaccettabilmente lunghi per il mio file JS su dispositivo mobile. Sto cercando di farmi un'idea delle grandi applicazioni JS chunking in blocchi che vengono caricati su richiesta. Sto utilizzando webpack, e di aver letto questo articolo:

https://webpack.github.io/docs/code-splitting.html

Utilizzando questo articolo, ho diviso il mio codice in app.js e vendor.js, dove vendor.js contiene tutti i moduli di terze parti/plugins.

Mi piacerebbe andare oltre e suddividere il file app.js in diversi punti di ingresso, che quindi scaricare pezzi in base alle esigenze. L'articolo sopra descrive come farlo con CommonJS o AMD. Tuttavia, sto usando i moduli nativi di ES6 invece di queste due opzioni e non trovo la sintassi per definire le dipendenze per file (in pratica, la versione ES6 di .ensure()).

Le mie domande:

• Posso usufruire di WebPack di on-demand di chunking utilizzando moduli ES6, o devo usare AMD o CommonJS per raggiungere questo obiettivo?
• Se è necessario utilizzare AMD/CommonJS, come posso evitare un refactoring dell'intera app?
• Cosa devo fare per garantire che le dipendenze vengano caricate in modo asincrono?
• Qualcuno ha un collegamento a un tutorial/guida/esempio di codice per illustrare ciò di cui ho bisogno?

Answer 1

Per rispondere alla tua prima domanda: Sì. È possibile utilizzare definitivamente i moduli ES6 e caricarli in modo asincrono, ma è necessario utilizzare la funzione require() in qualsiasi punto del codice, anziché importare le importazioni nella parte superiore del modulo come normale.

Anche tenere a mente se si utilizza export default e l'utilizzo di babele 6, si dovrà richiamare il modulo utilizzando Module.default (Babel 5 tratta la stessa Module come l'esportazione di default come una scorciatoia, ma il nuovo comportamento è più diretto .More info here

ci sembra essere 3 possibili ingredienti:

1. punti di ingresso
2. chunking
3. asincrona carico

È possibile impostare i punti di ingresso separati e solo includere la risultante build separatamente in il tuo html. Ma puoi anche utilizzare il caricamento asincrono basato su altre cose (come lo scorrimento fino a un certo punto, l'esistenza di determinate classi/ID).

C'è una guida succinta a questi nella parte inferiore di Pete Hunt's how-to che è molto più semplice da comprendere rispetto alla documentazione ufficiale del webpack.

Jonathan Creamer ha anche una grande esperienza nelle due parti della sua serie di post Advanced Webpack.

Answer 2

I moduli ES6 sono implementati aumentando JS con una sintassi speciale che non può essere facilmente estesa in javascript nel modo in cui webpack extends richiede per AMD/CommonJS.

Tuttavia, è possibile utilizzare CommonsChunkPlugin per specificare esternamente i blocchi per la divisione del codice. Dovrai comunque includere questi blocchi manualmente.

Esempio da documentazione:

dividere il codice in fornitore e l'applicazione.

entry: { 
    vendor: ["jquery", "other-lib"], 
    app: "./entry" 
} 
new CommonsChunkPlugin({ 
    name: "vendor", 

    // filename: "vendor.js" 
    // (Give the chunk a different name) 

    minChunks: Infinity, 
    // (with more entries, this ensures that no other module 
    // goes into the vendor chunk) 
}) 
<script src="vendor.js" charset="utf-8"></script> 
<script src="app.js" charset="utf-8"></script>