Zoals de wiki van webpack zegt, is het mogelijk om de analysetool te gebruiken om de bouwprestaties te optimaliseren:

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

Hints uit buildstatistieken

Er is een analysetooldie uw build visualiseert en ook biedt
een hint hoe de bouwgrootte en bouwprestaties kunnen worden geoptimaliseerd.

U kunt het vereiste JSON-bestand genereren door webpack –profile . uit te voeren
–json > stats.json

Ik genereer het statistiekenbestand (hier beschikbaar)
heb het geüpload naar de analysetool van webpack
en onder het tabblad Hints
Ik zei dat ik de prefetchPlugin moest gebruiken:

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

Lange modulebouwketens

Gebruik prefetchingom de bouwprestaties te verbeteren.
Prefetch een module uit het midden van de keten.

Ik heb het web binnenstebuiten gegraven om de enige beschikbare documentatie op prefechPlugin te vinden is dit:

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

PrefetchPlugin

new webpack.PrefetchPlugin([context], request)

Een aanvraag voor een normale module, die al eerder is opgelost en gebouwd
er een behoefte aan optreedt. Dit kan de prestaties verbeteren. Probeer de . te profileren
bouw eerst om slimme prefetching-punten te bepalen.

Mijn vragen:

• Hoe prefetchPlugin correct gebruiken?
• Wat is de juiste workflow om deze te gebruiken met de Analyse-tool?
• Hoe weet ik of de prefetchPlugin werkt? hoe kan ik het meten?
• Wat betekent het om een module vooraf in het midden van de keten op te halen?

Ik stel enkele voorbeelden zeer op prijs

Help me om van deze vraag een waardevolle hulpbron te maken voor de volgende ontwikkelaar die de prefechPlugin en de analysetools wil gebruiken.
Dank je.

Antwoord 1, autoriteit 100%

Ja, de documentatie van de pre-fetch plug-in is vrijwel onbestaande. Nadat ik het voor mezelf heb uitgezocht, is het vrij eenvoudig te gebruiken en is er niet veel flexibiliteit. In principe zijn er twee argumenten nodig, de context (optioneel) en het modulepad (ten opzichte van de context). De context in jouw geval zou /absolute/path/to/your/project/node_modules/react-transform-har/zijn, ervan uitgaande dat de tilde in je screenshot verwijst naar node_modulesvolgens de node_module-resolutievan webpack.

De daadwerkelijke prefetch-module zou idealiter niet meer dan drie module-afhankelijkheden diep moeten zijn. Dus in jouw geval is isFunction.jsde module met de lange build-keten en idealiter zou deze vooraf moeten worden opgehaald op getNative.js

Ik vermoed echter dat er iets funky in je configuratie zit, omdat je build chain-afhankelijkheden verwijzen naar module-afhankelijkheden, die automatisch zouden moeten worden geoptimaliseerd door webpack. Ik weet niet zeker hoe je dat hebt gekregen, maar in ons geval zien we geen waarschuwingen over lange build-ketens in node_modules. De meeste van onze lang gebouwde ketens zijn te wijten aan diep geneste reactiecomponenten die scss vereisen. dat wil zeggen:

Ongeacht, u wilt voor elk van de waarschuwingen een nieuwe plug-in toevoegen, zoals:

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

Het tweede argument moet een string zijn naar de relatieve locatie van de module. Ik hoop dat dit logisch is.

Antwoord 2, autoriteit 6%

Het midden van je keten is waarschijnlijk react-transform-hmr/index.jsaangezien het ongeveer halverwege begint. U kunt PrefetchPlugin('react-transform-hmr/index')proberen en uw profiel opnieuw starten om te zien of dit uw totale bouwtijd helpt versnellen.