Get best of the week

Arrêtez d'importer des packages JavaScript entiers

Combien de fois avez-vous déjà importé un package JavaScript entier dans un projet alors que vous n'aviez besoin que de très peu de fonctionnalités de ce package? Vous pourrez probablement vous rappeler de nombreux cas de ce type.

Un exemple vivant d'un package qui est entièrement importé, ne nécessitant que quelques-unes de ses fonctions, peut être appelé la bibliothèque Lodash . Si vous n'avez pas entendu parler de cette bibliothèque - vous devriez jeter un œil à sa documentation. En particulier, sur le site Web du projet, vous pouvez découvrir que Lodash simplifie le développement JavaScript en assumant la tâche de travailler avec des tableaux, des nombres, des objets, etc.



La bibliothèque Lodash comprend plus de 200 fonctions. Cela suggère qu'elle est en effet en mesure d'aider le programmeur à résoudre de nombreux problèmes. Mais il peut arriver qu'en important la bibliothèque entière, seules 4 à 5 fonctions seront appelées. Cela nous amène à la question de l'opportunité d'importer l'ensemble du package dans une situation où seulement 2 à 3% de ses capacités seront utilisées. Réfléchissons à la façon de gérer cela.

Lodash get function


L'une de mes fonctionnalités préférées de la bibliothèque Lodash est la fonctionnalité get. Il vous permet d'organiser un accès sécurisé aux objets imbriqués et prend en charge l'utilisation des valeurs par défaut.

Voici un exemple d'utilisation de cette fonction:

const _ = require('lodash');

let employee1 = {
  name : "Jon",
  address : {
    street : "North Avenue",
    area : "DAC",
    zip : "87344",
    contact : [ 12444554, 9384847 ]
  },
  designation : "Manager"
};

let employee2 = {
  name : "Jake",
  designation : "Senior Manager"
};

function getHomeContact(employee) {
  return employee.address.contact;
}

getHomeContact(employee1); // [12444554, 9384847]
getHomeContact(employee2); // Uncaught TypeError: Cannot read property 'contact' of undefined

function getHomeContactWithLodash(employee) {
  return  _.get(employee, "address.contact", []);
}

getHomeContactWithLodash(employee1); // [12444554, 9384847]
getHomeContactWithLodash(employee2); // []

L'utilisation de cette fonction vous permet de rendre le code beaucoup plus propre qu'auparavant. Cela permet d'éviter les erreurs dues au fait que lorsqu'un tableau vide est attendu, la fonction ne reviendra pas null. Grâce à cette fonction, vous ne pouvez pas, par erreur, appeler une méthode mapsur un tableau vide. Il protège contre d'autres problèmes.

Voyons comment l'inclusion de la bibliothèque Lodash dans le projet s'il est prévu d'utiliser uniquement la fonction affectera la taille du bundle get. Les expériences seront menées à l'aide d'un projet React. La taille du bundle sera analysée avant d'importer la bibliothèque et après diverses options de connexion au projet.

Taille du projet avant d'importer la bibliothèque


Nous analysons la taille des fichiers du projet avant d'importer la bibliothèque.


Taille du fichier avant d'utiliser Lodash Voyons

maintenant les conséquences de plusieurs façons d'importer une bibliothèque dans un projet.

Taille du projet après avoir utilisé différentes méthodes d'importation de bibliothèque


▍1. Importation traditionnelle


Il s'agit d'importer la bibliothèque de l'une des manières traditionnelles suivantes.

La première:

import _ from ‘lodash’;

Seconde:

const _ = require('lodash');

Voici comment cela affectera la taille finale des fichiers de projet.


Redimensionnement des fichiers de projet lors de l'importation d'un package complet

▍2. Importation ES6


Ici encore, nous avons deux options.

La première:

import { get } from 'lodash';

Seconde:

const { get } = require('lodash');

Examinons l'effet de ces importations sur la taille des fichiers de projet.


Taille des fichiers lors de l'importation de la fonction get à l'aide d'une affectation destructive

Comme vous pouvez le voir, l'utilisation des deux approches ci-dessus a entraîné une augmentation de la taille des fichiers d'environ 23 Ko. Et il s'agit d'une augmentation très importante, d'autant plus que nous parlons d'utiliser une seule fonction de la bibliothèque, qui comprend plus de 200 fonctions. En conséquence, il s'avère que la taille du bundle a augmenté autant qu'on pourrait s'y attendre si toutes ces 200 fonctions étaient utilisées dans le projet.

Peut-être que 23 Kb n'est pas un si gros prix pour utiliser la seule fonction nécessaire? Non, c'est trop. 

Existe-t-il un moyen d'importer uniquement ce dont vous avez besoin dans un projet? Oui, il existe un tel moyen.

Analysons le dossier où sont stockés les matériaux Lodash.

Pour ce faire, il suffit de suivre le chemin node_modules/lodash. Dans ce dossier, vous pouvez trouver de nombreux fichiers dans lesquels le code des fonctions individuelles est stocké. Parmi eux, il est facile de trouver le fichier get.jsdans lequel se trouve le code de la fonction qui nous intéresse get. Et cela signifie que si nous n'avons besoin que d'une fonction, il getsuffit d'importer uniquement ce fichier dans le projet. Cela nous amène à la troisième méthode d'importation.

▍3. Importez le fichier get.js depuis Lodash


Ici encore, deux méthodes sont disponibles.

La première:

import get from 'lodash/get';

Seconde:

const get = require('lodash/get');

Jetez un œil au redimensionnement du bundle.


Tailles de fichier lors de l'importation du fichier get.js

On peut voir qu'en raison du fait que nous n'avons importé que le fichier dans le projetget.js, nous avons pu nous débarrasser de plus de 20 Ko de code inutile qui pénètre dans le bundle lors de l'utilisation d'autres méthodes. Mais nous parlons d'un seul paquet. Un projet JavaScript typique a beaucoup plus de dépendances. Imaginez comment une approche prudente de l'importation de packages et un contrôle constant de la taille des bundles peuvent affecter un projet serveur ou client.

Tous les packages prennent-ils en charge une approche d'importation sélective?


Non, pas tous. Cela dépend complètement de l'organisation des fichiers du package. Mais, heureusement, la plupart des packages populaires assez volumineux sont structurés de telle sorte qu'en travaillant avec eux, il est facile d'organiser l'importation sélective de leurs capacités individuelles.

Comment faire de même en travaillant avec d'autres bibliothèques?


Le processus de suppression du code inutilisé est appelé tremblement d'arbre. Si vous devez, par exemple, «secouer l'arbre» ​​de la bibliothèque Ant Design - recherchez sur Internet les mots «antd tree shaking». Vous pouvez très bien trouver une discussion à ce sujet sur StackOverflow ou sur GitHub. Après avoir trouvé une telle discussion - regardez-la - il est fort possible que quelqu'un ait déjà résolu la tâche avant vous.

Une autre façon de se débarrasser du code inutile nécessite un peu plus d'efforts. Vous devez aller dans le dossier du package situé dans node_moduleset faire une analyse de code. En particulier, vous devriez être intéressé par la structure du projet et savoir s'il est divisé en petits modules qui peuvent être importés dans le projet indépendamment les uns des autres.

Exemple d'optimisation d'importation à l'aide du package antd


Avant:

import { Menu} from 'antd';

Après:

import Menu from 'antd/es/menu';
import 'antd/es/menu/style/css';

Exemple d'optimisation d'importation à l'aide du package material-ui


Avant:

import { Button } from '@material-ui/core';

Après:

import Button from '@material-ui/core/Button';

Exemple d'optimisation d'importation à l'aide du package de moment


L'optimisation du moment d'importation de la bibliothèque semble un peu plus compliquée. Par conséquent, si vous en avez besoin, jetez un œil à la tâche que j'ai créée dans le tracker de tâches de cette bibliothèque.

Sommaire


Vous pouvez vous-même vous assurer que beaucoup de code inutile pénètre dans vos projets. Vous pouvez résoudre ce problème en comparant soigneusement ce que vous importez avec ce que vous utilisez. Cela vous permettra, par exemple, de réduire le temps de chargement de vos sites. Par conséquent, il est recommandé de surveiller attentivement la taille des ensembles de projets et d'optimiser les importations de dépendances.

Et comment, dans vos projets JavaScript, avez-vous du mal à importer du code inutile?

More articles:


All Articles