Recherche précédente:

Comme le dit le wiki de Webpack, il est possible d'utiliser l'outil d'analyse pour optimiser les performances de construction:

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

Astuces des statistiques de construction

Il existe un outil d'analyse qui visualise votre build et fournit également des conseils sur la manière dont la taille et les performances de build peuvent être optimisées .

Vous pouvez générer le fichier JSON requis en exécutant webpack --profile --json> stats.json

Je génère le fichier de statistiques ( disponible ici )
et je l'ai téléchargé sur l'outil d'analyse de webpack et sous l' onglet Astuces, j'ai dit d'utiliser le prefetchPlugin:

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

Longues chaînes de construction de modules

Utilisez la prélecture pour augmenter les performances de compilation. Prérécupérez un module au milieu de la chaîne .

J'ai fouillé le Web pour trouver la seule documentation disponible sur prefechPlugin est la suivante:

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

PrefetchPlugin

new webpack.PrefetchPlugin([context], request)

Une demande pour un module normal, qui est résolu et construit avant même qu'une demande ne se produise. Cela peut améliorer les performances. Essayez d'abord de profiler la construction pour déterminer les points de prélecture intelligents .

Mes questions:

• Comment utiliser correctement prefetchPlugin?
• Quel est le bon flux de travail pour l'utiliser avec l'outil d'analyse?
• Comment savoir si le prefetchPlugin fonctionne? comment puis-je le mesurer?
• Qu'est-ce que cela signifie de pré-extraire un module du milieu de la chaîne ?

J'apprécierai vraiment quelques exemples

Aidez-moi à faire de cette question une ressource précieuse pour le prochain développeur qui souhaite utiliser prefechPlugin et les outils d'analyse. Je vous remercie.

Ouais, la documentation du plugin de pré-extraction est quasiment inexistante. Après l'avoir compris par moi-même, c'est assez simple à utiliser et il n'y a pas beaucoup de flexibilité. Fondamentalement, il prend deux arguments, le contexte (facultatif) et le chemin du module (par rapport au contexte). Le contexte dans votre cas /absolute/path/to/your/project/node_modules/react-transform-har/supposerait que le tilde dans votre capture d'écran se réfère à node_modulesla résolution node_module du webpack .

Le module de prélecture proprement dit ne devrait idéalement pas comporter plus de trois dépendances de module. Donc, dans votre cas isFunction.jsest le module avec la longue chaîne de construction et idéalement, il devrait être pré-récupéré àgetNative.js

Cependant, je soupçonne qu'il y a quelque chose de génial dans votre configuration, car vos dépendances de chaîne de construction font référence aux dépendances de module, qui devraient être automatiquement optimisées par webpack. Je ne sais pas comment vous avez obtenu cela, mais dans notre cas, nous ne voyons aucun avertissement concernant les longues chaînes de construction dans node_modules. La plupart de nos longues chaînes de construction sont dues à des composants de réaction profondément imbriqués qui nécessitent scss. c'est à dire:

Quoi qu'il en soit, vous voudrez ajouter un nouveau plugin pour chacun des avertissements, comme ceci:

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

Le deuxième argument doit être une chaîne de l'emplacement relatif du module. J'espère que cela a du sens.

Le milieu de votre chaîne se trouve probablement react-transform-hmr/index.jsà mi-chemin. Vous pouvez essayer de PrefetchPlugin('react-transform-hmr/index')réexécuter votre profil pour voir si cela vous aide à accélérer votre temps total de création.