Ricerca precedente:

Come dice il wiki di webpack, è possibile utilizzare lo strumento di analisi per ottimizzare le prestazioni di compilazione:

da: https://github.com/webpack/docs/wiki/build-performance#hints-from-build-stats

Suggerimenti dalle statistiche di costruzione

C'è uno strumento di analisi che visualizza la tua build e fornisce anche qualche suggerimento su come ottimizzare le dimensioni e le prestazioni della build .

È possibile generare il file JSON richiesto eseguendo webpack --profile --json> stats.json

Genero il file delle statistiche ( disponibile qui ) lo ho caricato nello strumento di analisi di webpack
e nella scheda Suggerimenti ho detto di usare il prefetchPlugin:

da: http://webpack.github.io/analyse/#hints

Catene di costruzione di moduli lunghi

Utilizza il precaricamento per aumentare le prestazioni di compilazione. Precarica un modulo dal centro della catena .

Ho scavato il web alla rovescia per trovare l'unica documentazione disponibile su prefechPlugin è questa:

da: https://webpack.js.org/plugins/prefetch-plugin/

PrefetchPlugin

new webpack.PrefetchPlugin([context], request)

Una richiesta per un modulo normale, che viene risolto e costruito ancor prima che si verifichi una richiesta. Questo può aumentare le prestazioni. Prova prima a creare il profilo della build per determinare punti di precaricamento intelligenti .

Le mie domande:

• Come utilizzare correttamente prefetchPlugin?
• Qual è il flusso di lavoro giusto per utilizzarlo con lo strumento Analizza?
• Come faccio a sapere se il prefetchPlugin funziona? come posso misurarlo?
• Cosa significa precaricare un modulo dal centro della catena ?

Apprezzerò davvero alcuni esempi

Per favore aiutami a fare di questa domanda una risorsa preziosa per il prossimo sviluppatore che desidera utilizzare prefechPlugin e gli strumenti di analisi. Grazie.

Sì, la documentazione del plug-in pre-fetch è praticamente inesistente. Dopo averlo capito da solo, è abbastanza semplice da usare e non c'è molta flessibilità. Fondamentalmente, richiede due argomenti, il contesto (opzionale) e il percorso del modulo (relativo al contesto). Il contesto nel tuo caso /absolute/path/to/your/project/node_modules/react-transform-har/presumerebbe che la tilde nello screenshot si riferisca alla risoluzione node_modulenode_modules di webpack .

Il modulo di precaricamento effettivo dovrebbe idealmente avere non più di tre dipendenze del modulo. Quindi nel tuo caso isFunction.jsè il modulo con la catena di build lunga e idealmente dovrebbe essere precaricato ingetNative.js

Tuttavia, sospetto che ci sia qualcosa di strano nella tua configurazione, perché le dipendenze della catena di compilazione si riferiscono alle dipendenze del modulo, che dovrebbero essere automaticamente ottimizzate da webpack. Non sono sicuro di come l'hai ottenuto, ma nel nostro caso, non vediamo alcun avviso sulle catene di build lunghe in node_modules. La maggior parte delle nostre catene di costruzione lunghe sono dovute a componenti di reazione profondamente annidati che richiedono scss. cioè:

Indipendentemente da ciò, ti consigliamo di aggiungere un nuovo plug-in per ciascuno degli avvisi, in questo modo:

plugins: [
    new webpack.PrefetchPlugin('/web/', 'app/modules/HeaderNav.jsx'),
    new webpack.PrefetchPlugin('/web/', 'app/pages/FrontPage.jsx')
];

Il secondo argomento deve essere una stringa per la posizione relativa del modulo. Spero che questo abbia un senso.

Il centro della tua catena è probabilmente react-transform-hmr/index.jsperché inizia circa a metà. Potresti provare a PrefetchPlugin('react-transform-hmr/index')rieseguire il tuo profilo per vedere se aiuta ad accelerare il tempo totale di costruzione.