Pourquoi faut-il supprimer vos console.log en production ?

Les logs ont-ils un impact sur les performances de vos applications ? TLDR: Oui.

Pourquoi faut-il supprimer vos console.log en production ?

La console est souvent utilisée lors du développement pour vérifier que les différentes étapes d'un code fonctionnent correctement, mais ces logs ont-ils un impact sur les performances de votre code ?

À noter que la meilleure mĂ©thode est de suivre une mĂ©thode de conception pilotĂ©e par les tests (TDD), ce qui Ă©vite d'utiliser des logs pour dĂ©bugger le code.

L'impact en terme de performances

S'ils n'ont qu'un impact minime lorsqu'ils sont exécutés un par un, les logs en production peuvent avoir un impact trÚs conséquent sur les performances de votre code, notamment quand ils sont présent dans une boucle, ou dans un morceau de code trÚs fréquemment appelé par vos utilisateurs.

Pour simuler cette perte de performance, j'ai créé un script de benchmark trÚs simple, dont j'ai mesuré le temps d'exécution avec console.time :

// Version sans logs
console.time("no-log");
for(let i=0,j=0; i < 1000000; i++){
    j++;
}
console.timeEnd("no-log");

//Version avec logs
console.time("log");
for(let i=0,j=0; i < 1000; i++){
    j++;
    console.log(j);
}
console.timeEnd("log");

Le principe est d'exécuter un morceau de code simple (une incrémentation) au sein d'une boucle de 1000 itérations, une fois sans logs, et une autre fois avec un log d'activé.

RĂ©sultats

Pour que les résultats soient suffisamment probants, j'ai exécuté ce script sur trois environnements différents, dont deux sur des machines différentes.

EnvironnementTemps avec logTemps sans log
Firefox (Laptop)158ms3ms
NodeJS (Laptop)570.3ms6.2ms
NodeJS (VPS OVH)139.450ms15.8ms

La diffĂ©rence est flagrante, selon l'environnement, notre petit log enfermĂ© dans sa boucle multiplie par 9, 50 et mĂȘme presque 100 le temps d'exĂ©cution de notre code, c'est Ă©norme.

Imaginez si ce log est présent dans une boucle, appelée dans une partie trÚs demandée d'une de vos APIs, la perte est considérable et peut devenir un goulot d'étranglement selon votre charge utilisateur.

Solutions

Pour palier Ă  ce problĂšme, il existe deux solutions pour ĂȘtre sĂ»r de n'oublier aucun console.log en production :

À noter que pour les deux solutions, vous pouvez choisir de ne cibler que les console.log et pas les console.warn ou console.error !

ESLint

ESLint est un linter, ce qui signifie qu'il va parcourir votre code afin de dĂ©tecter si certaines pratiques vont Ă  l'encontre de sa configuration. Vous pouvez donc ajouter la rĂšgle "no-console" dont la documentation est ci-dessous pour ĂȘtre averti d'un console.log que vous auriez oubliĂ© :

no-console - Rules
A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.

Babel

Babel est un transpiler, ce qui signifie qu'il va prendre votre code pour le compiler de maniÚre transversale d'une version d'un langage à une autre, et y appliquer des modifications que vous aurez déterminé.

Avec le plugin "transform-remove-console", Babel supprimera automatiquement tous les appels console.log lors de la transpilation, comme l'indique la documentation  :

babel-plugin-transform-remove-console · Babel
## Example

Conclusion

Je privilégierai plutÎt la configuration ESLint pour cette tùche, car il est possible de vouloir garder certains logs précis, notamment en NodeJS, et il est possible d'ajouter des exceptions dans le code pour ignorer une rÚgle ESLint au cas par cas.

J'espĂšre que cet article vous aura plu, et Ă  bientĂŽt sur le blog !

Les articles les plus populaires du blog

Envie de continuer à lire des articles autour du développement web (entre autres) ? Voici la sélection des articles de mon blog les plus lus par la communauté !

Voir la sĂ©lection 🚀

Recevez les articles de la semaine par e-mail pour ne rien manquer !

S'abonner à la newsletter 📧

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage d'expériences et de connaissances.

Aujourd'hui je suis aussi coach pour dĂ©veloppeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et ĂȘtre tenu au courant de mes projets !


Photo par Daria Nepriakhina sur Unsplash