Dans cet atelier de programmation, vous allez améliorer les performances de l'application suivante en supprimant toutes les dépendances inutilisées et inutiles.
Mesurer
Il est toujours bon de commencer par mesurer les performances d'un site Web avant en ajoutant des optimisations.
- Pour prévisualiser le site, appuyez sur Afficher l'application. Appuyez ensuite sur
Plein écran
Allez-y, cliquez sur votre chaton préféré ! de Firebase Realtime Database est utilisée dans cette application. C'est pourquoi le score est actualisé en temps réel synchronisés avec toutes les autres personnes utilisant l'application. 🐈
- Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
- Cliquez sur l'onglet Réseau.
- Cochez la case Disable cache (Désactiver le cache).
- Actualisez l'application.
Presque 1 Mo de code JavaScript est envoyé pour charger cette application simple.
Consultez les avertissements liés au projet dans les outils de développement.
- Cliquez sur l'onglet Console.
- Assurez-vous que
Warnings
est activé dans le menu déroulant des niveaux à côté de EntréeFilter
.
- Examinez l'avertissement affiché.
Firebase, l'une des bibliothèques utilisées dans cette application, est un un bon samaritan en indiquant aux développeurs qu'ils ne doivent pas importer ses le package entier, mais uniquement les composants qui sont utilisés. En d'autres termes, il y a bibliothèques inutilisées pouvant être supprimées de l'application pour lui permettre de charger plus rapidement.
Dans certains cas, une bibliothèque particulière une alternative plus simple. Le concept de suppression des bibliothèques inutiles est abordés dans la suite de ce tutoriel.
Analyser le bundle
L'application comporte deux dépendances principales:
- Firebase: une plate-forme qui fournit un certain nombre utiles pour les applications iOS, Android ou Web. Voici les données en temps réel Base de données permet de stocker et synchroniser les informations de chaque chaton en temps réel.
- Moment.js: une bibliothèque d'utilitaires qui facilite la
gérer les dates en JavaScript. La date de naissance de chaque chaton est stockée dans le
la base de données Firebase.
moment
permet de calculer son ancienneté en semaines.
Comment seulement deux dépendances peuvent-elles contribuer à une taille de lot de presque 1 Mo ? Eh bien, L'une des raisons est que toute dépendance peut à son tour avoir sa propre dépendances. Il y a donc bien plus que deux, si chaque profondeur/branche dépendance "tree" est pris en compte. Une application peut facilement devenir volumineuse assez rapidement si de nombreuses dépendances sont incluses.
Analysez le bundler pour vous faire une meilleure idée de ce qui se passe. Il existe un certain nombre
outils communautaires conçus pour vous aider à y parvenir, tels que
webpack-bundle-analyzer
Le package de cet outil est déjà inclus dans l'application en tant que devDependency
.
"devDependencies": {
//...
"webpack-bundle-analyzer": "^2.13.1"
},
Cela signifie qu'il peut être utilisé directement dans le fichier de configuration webpack.
Importez-le au tout début de webpack.config.js
:
const path = require("path");
//...
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
Ajoutez-le maintenant en tant que plug-in à la fin du fichier dans le tableau plugins
:
module.exports = {
//...
plugins: [
//...
new BundleAnalyzerPlugin()
]
};
Lorsque l'application est actualisée, vous devriez voir une visualisation de l'intégralité au lieu de l'application elle-même.
Pas aussi mignons que de voir des chatons ⁂, mais incroyablement utiles quand même. Pointez sur l'un des packages pour afficher sa taille représentée en trois différentes manières:
Taille de la statistique | Taille avant toute minimisation ou compression. |
---|---|
Taille analysée | Taille du package réel dans le bundle après sa compilation. La version 4 de webpack (utilisée dans cette application) réduit la taille les fichiers compilés automatiquement, c'est pourquoi il est plus petit la taille de l'image. |
Taille compressée avec Gzip | Taille du package après sa compression avec l'encodage gzip. Ce est traité dans un guide distinct. |
Avec l'outil webpack-bundle-analyzer, il est plus facile d'identifier les ressources inutilisées ou les packages inutiles qui constituent une grande partie du pack.
Supprimer les packages inutilisés
La visualisation montre que le package firebase
se compose de nombreuses
qu'une simple base de données. Elle comprend des packages supplémentaires tels que:
firestore
auth
storage
messaging
functions
Ce sont tous des services incroyables fournis par Firebase (vous pouvez vous reporter aux documentation pour en savoir plus), mais aucune n'est utilisée dans l'application. aucune raison de les importer toutes.
Annulez les modifications apportées dans webpack.config.js
pour afficher à nouveau l'application:
- Supprimez
BundleAnalyzerPlugin
de la liste des plug-ins:
plugins: [
//...
new BundleAnalyzerPlugin()
];
- Maintenant, supprimez l'importation inutilisée en haut du fichier:
const path = require("path");
//...
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
À présent, l'application devrait se charger normalement. Modifiez src/index.js
pour mettre à jour
Importations Firebase.
import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';
Désormais, l'avertissement des outils de développement ne s'affiche plus lorsque l'application est actualisée. Ouvrir le Le panneau Network (Réseau) des outils de développement présente également une bonne réduction de la taille du bundle:
Plus de la moitié de la taille du bundle a été supprimée. Firebase propose de nombreuses
et permet aux développeurs d'inclure uniquement ceux qui sont réellement
nécessaires. Dans cette application, seul firebase/database
a été utilisé pour stocker et synchroniser
toutes les données. L'importation firebase/app
, qui configure la surface d'API pour
est toujours obligatoire.
De nombreuses autres bibliothèques populaires, telles que lodash
, permettent également aux développeurs de
importer de manière sélective différentes
parties de leurs packages. Sans beaucoup de travail,
Mettre à jour les importations de bibliothèques dans une application pour n'inclure que ce qui est utilisé
peut entraîner une amélioration significative
des performances.
Bien que la taille du bundle ait été nettement réduite, ce que vous avez à faire ! 😈
Supprimer les packages inutiles
Contrairement à Firebase, l'importation de parties de la bibliothèque moment
ne peut pas être effectuée en tant que
mais peut-être peut-être être complètement supprimé ?
L'anniversaire de chaque chaton mignon est stocké au format Unix (millisecondes) dans dans la base de données Firebase.
Il s'agit d'un horodatage d'une date et d'une heure particulières représentée par le nombre de de millisecondes écoulées depuis le 1er janvier 1970 à 00:00 UTC. Si le la date et l'heure peuvent être calculées dans le même format, une petite fonction permettant de trouver de chaque chaton en semaines peut probablement être reproduit.
Comme toujours, essayez de ne pas effectuer de copier-coller en suivant la procédure. Commencer par
Suppression de moment
des importations dans src/index.js
.
import firebase from 'firebase/app';
import 'firebase/database';
import * as moment from 'moment';
Un écouteur d'événements Firebase gère les modifications de valeur dans notre base de données:
favoritesRef.on("value", (snapshot) => { ... })
Au-dessus, ajoutez une petite fonction permettant de calculer le nombre de semaines date donnée:
const ageInWeeks = birthDate => {
const WEEK_IN_MILLISECONDS = 1000 * 60 * 60 * 24 * 7;
const diff = Math.abs((new Date).getTime() - birthDate);
return Math.floor(diff / WEEK_IN_MILLISECONDS);
}
Dans cette fonction, la différence en millisecondes entre la date actuelle et
l'heure (new Date).getTime()
et la date de naissance (l'argument birthDate
, déjà
en millisecondes) est calculée et divisée par le nombre de millisecondes
chaque semaine.
Enfin, toutes les instances de moment
peuvent être supprimées de l'écouteur d'événements en
à l'aide de cette fonction:
favoritesRef.on("value", (snapshot) => { const { kitties, favorites, names, birthDates } = snapshot.val(); favoritesScores = favorites; kittiesList.innerHTML = kitties.map((kittiePic, index) => {const birthday = moment(birthDates[index]);return ` <li> <img src=${kittiePic} onclick="favKittie(${index})"> <div class="extra"> <div class="details"> <p class="name">${names[index]}</p><p class="age">${moment().diff(birthday, 'weeks')} weeks old</p><p class="age">${ageInWeeks(birthDates[index])} weeks old</p> </div> <p class="score">${favorites[index]} ❤</p> </div> </li> `}) });
Maintenant, actualisez l'application et consultez à nouveau le panneau Network (Réseau).
La taille de notre lot a encore été réduite de plus de moitié.
Conclusion
Dans cet atelier de programmation, vous devriez savoir comment analyser spécifique et pourquoi il peut être utile de supprimer les ressources inutilisées packages. Avant de commencer à optimiser une application avec cette technique, il est important de savoir que cela peut s'avérer bien plus complexe si l'on considère applications.
En ce qui concerne la suppression des bibliothèques inutilisées, essayez d'identifier les parties d’ensemble sont utilisés et quelles pièces ne le sont pas. Pour une apparence mystérieuse qui semble n'être utilisé nulle part, prenez du recul et vérifiez quelles dépendances de niveau supérieur pourraient en avoir besoin. Essayez de trouver un moyen de de les dissocier les uns des autres.
Lorsqu'il s'agit de supprimer les bibliothèques inutiles, le processus peut être un peu plus complexe.
compliquée. Il est important de travailler en étroite collaboration
avec votre équipe et de voir s'il y a
de simplifier certaines parties du codebase. Suppression de moment
dans cette
application peut sembler être la bonne chose à faire à chaque fois, mais qu'est-ce
s’il y avait des fuseaux horaires et
différents paramètres régionaux à gérer ? Ou
Et s'il y avait des manipulations
de la date plus compliquées ? Les choses peuvent devenir très
délicat lors de la manipulation et de l'analyse des dates/heures et des bibliothèques telles que moment
et date-fns
simplifient considérablement ce processus.
Tout est un compromis, et il est important d'évaluer si cela vaut la peine la complexité et les efforts nécessaires pour déployer une solution personnalisée au lieu de s'appuyer sur bibliothèque tierce.