Exemples détaillés de compilation et de packaging de graphiques visuels à l'aide de Webpack 2

L'analyse statistique de la compilation et du packaging Webpack 2 à l'aide de graphiques visuels est expliquée en détail pour votre référence plus intuitive.

Dans les dix-sept épisodes précédemment mis à jour du "Tutoriel vidéo Webpack 2", nous avons successivement expliqué en détail Webpack 2 de la configuration à l'empaquetage, de l'optimisation de la compression à l'état de débogage, etc. des graphiques visuels pour mieux comprendre le processus d'empaquetage et de compilation de Webpack 2. Dans le même temps, les graphiques visuels sont également une solution très intuitive pour la vue d'ensemble du projet et les conseils d'optimisation.

1. Génération de statistiques de compilation Webpack 2

Les paramètres permettant à Webpack 2 de générer des statistiques consistent principalement à configurer les deux paramètres suivants.

• --génération de statistiques de profil avec informations relatives au temps d'exécution, paramètres facultatifs

• --json permet à Webpack de générer des informations statistiques, un format de sortie ; pour json.

Ce qui suit est une capture d'écran de la configuration dans le projet de test package.json.

Après la configuration, exécutez la commande npm run stats sur la ligne de commande pour voir le fichier de statistiques généré stats.json dans le répertoire du projet.

2. Utilisez les données générées pour générer des graphiques visuels

2.1 Outil d'analyse visuelle officiel

Le responsable fournit un outil de visualisation sur http://webpack.github .io/ analyse/, sélectionnez le fichier stats.json généré ci-dessus pour générer un graphique visuel généré pour le projet.

Dans ce tableau, vous pouvez voir la taille des fichiers générés par votre projet, les relations de référence et les informations associées sur les modules du projet.

2.2 Webpack Visualizer

est également un outil de génération Web. Vous pouvez choisir de télécharger le fichier stats.json généré pour générer des graphiques.

2.3 Détection et cartographie des packages en double

Vous pouvez installer le plug-in duplicate-package-checker-webpack-plugin pour détecter les packages en double dans le projet . Pour faciliter l'optimisation des références du projet.

Bien sûr, vous pouvez utiliser directement le fichier de données généré précédemment pour générer directement des informations statistiques graphiques plus intéressantes.
https://alexkuz.github.io/webpack-chart/

2.4 Détection des ressources inutilisées

L'utilisation peut également détecter celles du projet Les fichiers de ressources ne sont pas utilisés et sont fournis à titre de référence dans des projets d'optimisation ultérieurs.

2.5 Génération de graphiques 3D

Il existe également un outil qui peut générer des icônes 3D, mais il semble que les informations soient trop confuses, ce n'est donc qu'un jouet avec lequel jouer.
https://alexkuz.github.io/stellar-webpack/

2.6 Certains autres outils

peuvent installer un composant localement et générer le L'icône d'utilisation des ressources peut être agrandie ou réduite.

Un outil de visualisation pour générer des dépendances de packages, qui peut être utilisé pour afficher graphiquement des informations telles que les dépendances circulaires entre les packages.

3. Résumé

Ces outils visuels peuvent grandement améliorer l'efficacité de la recherche de cibles d'optimisation lors de l'optimisation ultérieure des projets.
Cependant, tous les problèmes de performances et les directives de dépendance des packages doivent toujours être mis en œuvre tout au long du processus de développement du projet, au lieu de s'attendre à optimiser les problèmes tels que la confusion des dépendances du projet à la fin, afin de ne pas se remettre des ennuis.

Adresse du code source dans le cours :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!