Share
L’une des méthodes les plus utiles pour optimiser votre code JavaScript peut vous surprendre: le supprimer de vos fichiers HTML. Dans cette vidéo de mon cours Le Guide du concepteur pour l'optimisation JavaScript, vous apprendrez à externaliser et à minimiser JavaScript.
Un excellent moyen d'accroître l'efficacité de notre code consiste à externaliser et à minimiser notre code..
Lorsque nous parlons d'externaliser notre code, nous parlons de supprimer tout notre code JavaScript de nos pages HTML et de le placer dans un fichier JavaScript séparé, un fichier .js.
C'est très facile à faire. Vous voudriez tout prendre à l'intérieur du scénario balises, supprimez-le, puis créez un nouveau fichier texte avec une extension .js. Ensuite, vous utiliseriez simplement un scénario balise pour pointer vers ce fichier.
Alors voici un exemple. J'ai un fichier index.html avec du code JavaScript à l'intérieur. Donc, je souligne simplement tout dans la scénario balises et le couper.
Et puis on peut se débarrasser de la scénario balises tout à fait en les mettant en évidence et en les supprimant.
Et puis je vais créer un nouveau fichier JavaScript dans mon dossier JavaScript et juste l'appeler site.js.
Peu importe l'éditeur de texte que vous utilisez. J'utilise le code Visual Studio ici, mais vous pouvez également utiliser des crochets ou tout autre éditeur de texte brut. Mais je l'enregistre en tant que site.js, et je vais simplement y coller tout le code JavaScript.
Maintenant, cela ne fonctionnera pas encore car nous ne signalons pas encore ce code JavaScript dans notre fichier HTML..
Mais nous pouvons revenir à notre index.html. Et puis, après avoir chargé toutes nos dépendances, nous créerons notre propre scénario balise pour charger le fichier que nous venons de créer.
Donc, c'est dans notre dossier JavaScript js / et puis je l'ai appelé site.js, le code est donc:
C'est tout ce qu'il faut pour externaliser votre JavaScript.
L'un des gros avantages d'avoir votre JavaScript dans un fichier séparé est que vous pouvez alors très facilement minimiser ou minimiser ce code JavaScript. Et lorsque vous avez une version abrégée de votre code, celle-ci s'exécutera beaucoup plus rapidement, car la taille du fichier sera réduite..
Il sera difficile de lire ou d’éditer ce fichier simplifié. C'est pourquoi vous sauvegardez la copie originale de votre code JavaScript afin que, si vous devez apporter des modifications, vous apportiez des modifications à ce fichier JavaScript original, puis que vous le réduisiez à nouveau..
Maintenant, comment vous minify? Il y a plusieurs options.
La plupart des éditeurs de code modernes ont des plugins qui réduiront votre JavaScript pour vous. Par exemple, j'utilise le code Visual Studio. Si nous allons dans nos extensions et faisons simplement une recherche sur "minify", vous pouvez voir plusieurs options pour minifier votre code.
Un autre éditeur de texte en ligne gratuit appelé Brackets possède également des extensions que vous pouvez utiliser pour réduire le code. Donc, si vous allez dans le gestionnaire d'extensions pour Brackets et faites une recherche sur "minify", vous verrez un minifier JavaScript.
N'oubliez pas qu'après avoir réduit votre code, vous devez modifier le fichier que vous pointez dans le fichier HTML. Donc, si vous aviez minifié site.js, vous auriez une nouvelle version probablement appelée site.min.js. Ainsi, dans votre code HTML, vous voudriez indiquer cette version simplifiée au lieu de la version originale de votre code. Sinon, toute cette minification est inutile
Si, pour une raison quelconque, vous aimez simplement utiliser le bloc-notes pour éditer tout votre code, vous pouvez toujours le réduire, et vous pouvez le faire en accédant à un site Web tel que JSCompress..
En gros, cela vous permet simplement de coller votre code puis de cliquer sur le bouton Compresser JavaScript bouton, et vous verrez que cela a compressé notre code de 74%.
Ceci est juste un très petit morceau de JavaScript ici, alors vous pouvez imaginer que si vous aviez beaucoup de JavaScript sur votre page, cela vous ferait vraiment économiser beaucoup de taille de fichier. Et quand vous avez un site web à fort trafic, cela vous aidera vraiment beaucoup.
L'un des avantages de l'externalisation et de la réduction de votre JavaScript est qu'il vous permet de gérer un peu mieux la mise en cache.
Supposons, par exemple, que vous utilisiez une grande partie du code JavaScript que vous allez utiliser sur plusieurs pages différentes de votre site Web. Il serait logique de placer cette petite partie de code JavaScript dans son propre fichier JavaScript, de sorte qu'une fois que l'utilisateur l'aura visité une fois, il est déjà mis en cache dans son navigateur. Ensuite, lorsqu'ils visitent une autre page pointant sur le même fichier JavaScript, il n'est pas nécessaire de le charger à nouveau. Donc, cela réduira le nombre de demandes qui sont faites pour cette partie de JavaScript particulière.
Si vous souhaitez passer au niveau supérieur, vous pouvez utiliser un réseau de distribution de contenu (CDN) pour stocker des versions de vos fichiers JavaScript dans des emplacements géographiquement divers. Donc, vous pourriez avoir votre JavaScript stocké sur des serveurs partout dans le monde.
L'avantage, c'est que si vous avez créé votre site Web au Texas et que quelqu'un au Royaume-Uni veut accéder à votre site Web, alors sans CDN, cet utilisateur devrait se connecter à votre serveur pour obtenir tous les fichiers dont il a besoin..
Mais si votre JavaScript est dans un CDN, alors il est probable qu'il y aura une version de ce fichier JavaScript sur un serveur au Royaume-Uni ou quelque part en Europe. Il serait donc beaucoup plus proche de l'emplacement de cet utilisateur, ce qui signifie qu'il téléchargerait plus rapidement et fonctionnerait mieux..
Gardez à l'esprit qu'un CDN coûte de l'argent, donc ce n'est vraiment que quelque chose que vous voulez poursuivre si vous êtes prêt pour le niveau suivant. Mais cela peut vraiment aider à accélérer votre site web.
Dans le cours complet, Le Guide du concepteur pour l'optimisation JavaScript, vous apprendrez davantage de techniques d'optimisation parfaitement adaptées aux concepteurs Web. Je vais vous montrer quelques techniques faciles à mettre en œuvre pour que votre code JavaScript, et donc vos sites Web, fonctionne correctement.
Vous pouvez suivre ce cours immédiatement avec un abonnement à Envato Elements. Pour un seul forfait mensuel, vous aurez accès non seulement à ce cours, mais également à notre bibliothèque croissante de plus de 1 000 cours vidéo et de livres numériques de premier plan sur l'industrie sur Envato Tuts.+.
De plus, vous obtenez maintenant des téléchargements illimités à partir de la vaste bibliothèque Envato Elements de plus de 460 000 ressources créatives. Créez avec des polices, des photos, des graphiques et des modèles uniques et livrez plus rapidement de meilleurs projets.
Accentsconagua