{"id":56707,"date":"2022-05-09T08:26:01","date_gmt":"2022-05-09T07:26:01","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=56707&preview=true&preview_id=56707"},"modified":"2024-08-21T13:18:39","modified_gmt":"2024-08-21T12:18:39","slug":"minifier-javascript","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/minifier-javascript\/","title":{"rendered":"Comment minifier JavaScript – Outils et m\u00e9thodes recommand\u00e9s"},"content":{"rendered":"

La plupart des utilisateurs souhaitent une exp\u00e9rience de navigation Web \u00e9l\u00e9gante, et JavaScript est depuis longtemps l’outil pr\u00e9f\u00e9r\u00e9 des d\u00e9veloppeurs pour offrir cette exp\u00e9rience \u00e9lev\u00e9e.<\/p>\n

Cependant, JavaScript n’est pas seulement l\u00e0 pour rendre les sites plus beaux. Il influence aussi directement les performances et le succ\u00e8s du site web. Acc\u00e9l\u00e9rer un site web<\/a> ou r\u00e9duire le temps de chargement des pages – deux concepts qui sont au c\u0153ur du d\u00e9veloppement JavaScript – sont des facteurs cruciaux pour am\u00e9liorer l’exp\u00e9rience des utilisateurs.<\/p>\n

Consultez notre guide vid\u00e9o pour minifier JavaScript<\/a><\/h3>\n<\/kinsta-video>\n

Si vous cherchez \u00e0 am\u00e9liorer les performances de votre site web dans les plus brefs d\u00e9lais, vous devez vous familiariser avec la minification JavaScript. Elle vous aidera \u00e0 exclure tous les caract\u00e8res inutiles de votre code source JavaScript sans en alt\u00e9rer la fonctionnalit\u00e9. De plus, elle r\u00e9duira le temps de chargement de votre site web et l’utilisation de la bande passante.<\/p>\n

La minification de JavaScript peut \u00eatre d\u00e9licate. Dans cet article, nous allons tracer un parcours pour vous aider \u00e0 r\u00e9duire votre code JavaScript pour les sites web WordPress et non-WordPress.<\/p>\n

<\/div><\/kinsta-auto-toc>\n\n

Qu’est-ce que JavaScript ?<\/h2>\n
\"JavaScript\"<\/a>
JavaScript (Image Source : Medium<\/a>)<\/figcaption><\/figure>\n

JavaScript<\/a> est un langage de script orient\u00e9 texte permettant de cr\u00e9er des sites web interactifs \u00e0 la fois du c\u00f4t\u00e9 client et du c\u00f4t\u00e9 serveur. C’est un langage plus simple et moins complexe \u00e0 apprendre que la plupart des autres, ce qui explique son utilisation r\u00e9pandue.<\/p>\n

Alors que HTML<\/a> et CSS<\/a> construisent la structure d’un site web, JavaScript ajoute des fonctionnalit\u00e9s complexes qui apportent de l’interactivit\u00e9 \u00e0 votre site web afin d’engager les utilisateurs. Par exemple, JavaScript offre des \u00e9l\u00e9ments complexes tels que le juke-box vid\u00e9o d\u00e9filant, les vid\u00e9os 2D\/3D et les cartes interactives.<\/p>\n

Notamment, les navigateurs web peuvent comprendre JavaScript. Par cons\u00e9quent, aux c\u00f4t\u00e9s de HTML et CSS, c’est un choix comp\u00e9tent \u00e0 faire si vous \u00eates int\u00e9ress\u00e9 par le d\u00e9veloppement web. Si vous avez besoin de cr\u00e9er un site web hautement interactif qui fonctionne dans tous les navigateurs sans aucune obstruction, alors JavaScript est l’option la plus fiable que vous pouvez employer.<\/p>\n

Qu’est-ce que la minification de code ?<\/h2>\n

La minification est \u00e9galement connue sous le nom de minimisation. La minification du code signifie l’optimisation du code pour gagner de l’espace, r\u00e9duire le temps de chargement des pages et diminuer l’utilisation de la bande passante du site web<\/a>. Toutefois, la plus grande pr\u00e9occupation est de minimiser le code sans en alt\u00e9rer la fonctionnalit\u00e9.<\/p>\n

La minification du code est possible dans toutes les technologies de programmation de base, notamment HTML<\/a>, CSS<\/a> et – comme nous allons le voir – JavaScript. Cependant, le processus n’est pas instantan\u00e9. Un certain travail est n\u00e9cessaire pour rendre le code plus compact tout en le gardant fonctionnel.<\/p>\n

Pour minifier le code JavaScript, vous devez l’analyser, le compresser et obtenir le r\u00e9sultat. Une fois qu’il a \u00e9t\u00e9 minifi\u00e9, il devrait \u00eatre presque illisible \u00e0 l’\u0153il nu. Vous avez supprim\u00e9 tous les espaces blancs inutiles, les commentaires, les caract\u00e8res de nouvelle ligne et tout ce qui rendait initialement le code lisible.<\/p>\n

Il se peut que vous deviez \u00e9galement apporter d’autres modifications au code, par exemple, l’inlining des fonctions, la suppression des d\u00e9limiteurs de bloc, l’utilisation de conditionnels implicites ou la r\u00e9\u00e9criture des variables locales.<\/p>\n

Exemples de code JavaScript non minifi\u00e9 et minifi\u00e9<\/h3>\n

Jetons un coup d’\u0153il \u00e0 quelques exemples de code. Ce premier bloc est du JavaScript normal, non minifi\u00e9 :<\/p>\n

\/\/ program to check if the string is palindrome or not\n\nfunction checkPalindrome(str) {\n\n    \/\/ find the length of a string\n    const len = string.length;\n\n    \/\/ loop through half of the string\n    for (let i = 0; i < len \/ 2; i++) {\n\n        \/\/ check if first and last string are same\n        if (string[i] !== string[len - 1 - i]) {\n            return 'It is not a palindrome';\n        }\n    }\n    return 'It is a palindrome';\n}\n\n\/\/ take input\nconst string = prompt('Enter a string: ');\n\n\/\/ call the function\nconst value = checkPalindrome(string);\n\nconsole.log(value);<\/code><\/pre>\n
Voyons maintenant \u00e0 quoi ressemble ce m\u00eame code une fois qu’il a \u00e9t\u00e9 minifi\u00e9 :<\/p>\n
function checkPalindrome(n){const t=string.length;for(let n=0;n<t\/2;n++)\nif(string[n]!==string[t-1-n])return\"It is not a palindrome\";return\"It is a palindrome\"}\nconst string=prompt(\"Enter a string: \"), value=checkPalindrome(string);console.log(value);<\/code><\/pre>\n
Comme vous pouvez le constater, le deuxi\u00e8me bloc de code est beaucoup plus petit et plus compact. Cela signifie qu’il se chargera et s’affichera plus rapidement, r\u00e9duisant ainsi le temps de chargement des pages et acc\u00e9l\u00e9rant le contenu.<\/p>\n
Ici, nous avons r\u00e9duit 529 octets \u00e0 324 octets, gagnant 205 octets d’espace libre et r\u00e9duisant le chargement de la page de pr\u00e8s de 40 %.<\/p>\n
C’est comme prendre un livre de 529 pages et le condenser en un livre de 324 pages. Bien s\u00fbr, un humain aurait du mal \u00e0 le lire, mais une machine le parcourrait sans probl\u00e8me.<\/p>\n
En connectant plusieurs fichiers JavaScript dans un fichier individuel minifi\u00e9, la minification du code diminue le nombre de requ\u00eates HTTP au serveur. Cela r\u00e9duit \u00e9galement la consommation de bande passante du site. De plus, la minification du code r\u00e9duit le temps d’ex\u00e9cution d’un script – toutes choses qui font baisser votre Time to First Byte (TTFB)<\/a>.<\/p>\n
Pourquoi faut-il minifier le code JavaScript ?<\/h2>\n
Lors de l’\u00e9criture du code initial, la plupart des d\u00e9veloppeurs se concentrent avant tout sur la r\u00e9alisation des t\u00e2ches. Sur cette route, ils ont tendance \u00e0 utiliser beaucoup de commentaires, d’espacements et de variables pour rendre le code plus lisible pour les autres personnes qui travailleront avec \u00e0 l’avenir.<\/p>\n
Bien qu’il s’agisse d’un excellent langage de programmation, JavaScript a un impact sur les pages web en les ralentissant. Pour gagner de l’espace et am\u00e9liorer la vitesse de chargement de vos pages, vous devez minifier le code JavaScript.<\/p>\n
La version minifi\u00e9e du code JavaScript peut r\u00e9duire la taille du fichier jusqu’\u00e0 30-90 %. Par cons\u00e9quent, la minification de JavaScript est devenue un rituel familier pour tous les d\u00e9veloppeurs.<\/p>\n
Chaque grand d\u00e9veloppeur de biblioth\u00e8ques JavaScript<\/a> (Angular, Bootstrap, etc.) fournit une version minifi\u00e9e de JavaScript pour le d\u00e9ploiement en production. Et chacun utilise une extension min.js<\/strong> pour l’indiquer.<\/p>\n
Avantages de la minification du code JavaScript<\/h3>\n
Voici un bref aper\u00e7u des avantages que vous obtiendrez apr\u00e8s avoir employ\u00e9 la minification JavaScript :<\/p>\n