N'utilisez que les portions indispensables des bibliothèques JavaScript et frameworks CSS

Ce que dit le référentiel

Les bibliothèques JavaScript telles que jQuery et les frameworks CSS prêts à l’emploi (Bootstrap, skeleton, gumby, foundation…) sont d’excellents outils pour réaliser rapidement des sites, car ils répondent à presque tous les besoins les plus courants. Revers de la médaille, on n’en utilise généralement qu’une petite portion ; or ces frameworks et bibliothèques ne s’appuient pas tous sur une architecture modulaire, ce qui contraint l’internaute à télécharger toute la librairie pour n’utiliser qu’un faible pourcentage de ses fonctionnalités.

Dans la mesure du possible, il est préférable de se passer de ces bibliothèques (voir https://youmightnotneedjquery.com) ou de n’en conserver que les portions réellement utilisées (voir https://getbootstrap.com/customize).

Utiliser un bundler (ex: Webpack) permet de faire facilement du tree shaking, soit d'éliminer du code "mort" donc non utilisé.

Notre avis

Avec Next.js, nous bénéficions d'un rendu serveur (SSR) qui réduit la quantité de JavaScript envoyé au client. Cela nous permet de charger uniquement les composants essentiels, minimisant ainsi le code inutile.

De plus, l'usage des React Server Components (RSC) optimise encore davantage la performance en évitant l'envoi de bibliothèques entières côté client. En parallèle, l'utilisation de Next.js pour le tree shaking permet d'éliminer le code mort, assurant un chargement rapide et léger pour les utilisateurs.