Supprimer le code inutilisé

Houssein Djirdeh

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. 🐈

1. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
2. Cliquez sur l'onglet Réseau.
3. Cochez la case Disable cache (Désactiver le cache).
4. 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ée Filter.

• 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:

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.