Maison interface Web js tutoriel Techniques roven pour réduire la taille du bundle JavaScript et améliorer les performances

Techniques roven pour réduire la taille du bundle JavaScript et améliorer les performances

Jan 07, 2025 pm 06:38 PM

roven Techniques to Reduce JavaScript Bundle Size and Boost Performance

En tant qu'auteur à succès, je vous invite à explorer mes livres sur Amazon. N'oubliez pas de me suivre sur Medium et de montrer votre soutien. Merci! Votre soutien compte pour le monde !

En tant que développeur, j'ai appris que l'optimisation de la taille du bundle JavaScript est cruciale pour créer des applications Web rapides et efficaces. Au fil des années, j'ai découvert plusieurs techniques qui ont toujours donné d'excellents résultats. Permettez-moi de partager mes expériences et mes idées sur six méthodes puissantes pour réduire la taille de votre bundle JavaScript.

Le fractionnement du code a changé la donne dans mon processus de développement. En utilisant des importations dynamiques, j'ai pu charger des modules JavaScript à la demande, réduisant ainsi considérablement les temps de chargement initiaux. Cette approche s'est avérée particulièrement bénéfique pour les grandes applications dotées d'ensembles de fonctionnalités complexes. Voici un exemple de la façon dont j'implémente le fractionnement de code :

const loadModule = async () => {
  const module = await import('./heavyModule.js');
  module.doSomething();
};

document.getElementById('loadButton').addEventListener('click', loadModule);
Copier après la connexion
Copier après la connexion
Copier après la connexion

Dans cet exemple, le module lourd n'est chargé que lorsque l'utilisateur clique sur un bouton, en gardant la taille initiale du bundle petite.

Le tremblement des arbres est une autre technique que j’emploie fréquemment. En tirant parti des modules ES6 et en créant des outils comme Webpack ou Rollup, je peux éliminer le code mort de mes bundles. Ce processus supprime les exportations inutilisées, réduisant ainsi considérablement la taille finale du bundle. Voici un exemple simple de la façon dont je structure mon code pour permettre une agitation efficace des arbres :

// utils.js
export const usedFunction = () => {
  console.log('This function is used');
};

export const unusedFunction = () => {
  console.log('This function is not used');
};

// main.js
import { usedFunction } from './utils.js';

usedFunction();
Copier après la connexion
Copier après la connexion
Copier après la connexion

Dans ce cas, lors du regroupement avec un outil prenant en charge le tremblement d'arbre, la fonction unusedFunction sera exclue du bundle final.

La minification est une pratique standard dans ma boîte à outils d'optimisation. J'utilise des outils comme UglifyJS ou Terser pour supprimer les espaces, raccourcir les noms de variables et optimiser le code. Ce processus peut réduire considérablement la taille des fichiers sans modifier les fonctionnalités. Voici un exemple de minification avant et après :

// Before minification
function calculateSum(a, b) {
  return a + b;
}

const result = calculateSum(5, 10);
console.log('The sum is: ' + result);

// After minification
function c(a,b){return a+b}const r=c(5,10);console.log('The sum is: '+r);
Copier après la connexion
Copier après la connexion
Copier après la connexion

La compression est une autre technique cruciale que je mets toujours en œuvre. En activant la compression Gzip ou Brotli sur le serveur, je peux réduire considérablement la taille des transferts de fichiers. Ceci est généralement configuré au niveau du serveur. Par exemple, dans un fichier Apache .htaccess :

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript
</IfModule>
Copier après la connexion

Le chargement différé a été un outil puissant dans mon arsenal d'optimisation des performances. En différant le chargement des ressources non critiques jusqu'à ce qu'elles soient nécessaires, je peux considérablement améliorer les temps de chargement initiaux des pages. Voici un exemple de la façon dont j'implémente le chargement différé pour les images :

<img src="placeholder.jpg" data-src="large-image.jpg">



<p>This code uses the Intersection Observer API to load images only when they're about to enter the viewport.</p>

<p>Lastly, I always perform bundle analysis to visualize my bundle composition and identify optimization opportunities. Tools like webpack-bundle-analyzer have been invaluable in this process. Here's how I typically set it up in my Webpack configuration:<br>
</p>

<pre class="brush:php;toolbar:false">const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  // ... other webpack config
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};
Copier après la connexion

Cela génère un treemap interactif qui m'aide à identifier les dépendances importantes et les domaines potentiels d'optimisation.

Ces techniques m'ont constamment aidé à réduire la taille des bundles JavaScript, ce qui a permis d'accélérer les temps de chargement et d'améliorer les performances des applications Web. Cependant, il est important de noter que l’optimisation est un processus continu. À mesure que les technologies Web évoluent, de nouvelles techniques d'optimisation émergent, et il est crucial de rester à jour et d'adapter nos stratégies en conséquence.

Un aspect que j'ai trouvé particulièrement difficile est d'équilibrer l'optimisation et la vitesse de développement. Une optimisation agressive peut parfois rendre la base de code plus difficile à maintenir ou à déboguer. Par exemple, même si la minification est idéale pour la production, elle peut rendre le débogage plus difficile. C'est pourquoi je m'assure toujours d'avoir des cartes sources disponibles à des fins de débogage.

Un autre défi auquel j'ai été confronté concerne les bibliothèques tierces. Bien que nous puissions optimiser notre propre code, les dépendances tierces sont souvent pré-regroupées et peuvent augmenter considérablement la taille de notre bundle. Dans de tels cas, j'ai trouvé utile de rechercher des bibliothèques alternatives plus légères ou d'utiliser des techniques telles que les importations dynamiques pour charger ces bibliothèques uniquement en cas de besoin.

Il convient également de mentionner que différentes applications peuvent bénéficier de différentes stratégies d'optimisation. Par exemple, une application monopage (SPA) pourrait bénéficier davantage du fractionnement du code et du chargement paresseux, tandis qu'un site multipage plus simple pourrait se concentrer davantage sur la minification et la compression.

Lors de la mise en œuvre de ces optimisations, il est crucial de mesurer leur impact. J'effectue toujours des audits de performances avant et après la mise en œuvre des optimisations pour m'assurer qu'elles produisent l'effet souhaité. Des outils comme Lighthouse ou WebPageTest ont été inestimables à cet égard.

Approfondissons certaines de ces techniques avec des exemples plus complexes.

Pour le fractionnement de code dans une application React, je pourrais utiliser React.lazy et Suspense :

const loadModule = async () => {
  const module = await import('./heavyModule.js');
  module.doSomething();
};

document.getElementById('loadButton').addEventListener('click', loadModule);
Copier après la connexion
Copier après la connexion
Copier après la connexion

Cette configuration permet à chaque itinéraire d'être chargé séparément, réduisant ainsi la taille initiale du paquet.

Pour le tremblement d'arbre, il est important de noter que cela fonctionne mieux avec la syntaxe du module ES6. Voici un exemple de la façon dont je pourrais structurer un module utilitaire pour tirer pleinement parti du tremblement d'arbre :

// utils.js
export const usedFunction = () => {
  console.log('This function is used');
};

export const unusedFunction = () => {
  console.log('This function is not used');
};

// main.js
import { usedFunction } from './utils.js';

usedFunction();
Copier après la connexion
Copier après la connexion
Copier après la connexion

Dans ce cas, les fonctions de soustraction et de division seraient supprimées du package final si elles ne sont pas utilisées ailleurs dans l'application.

En matière de minification, les outils de build modernes incluent souvent cette étape par défaut. Cependant, nous pouvons parfois obtenir des résultats encore meilleurs en modifiant les paramètres. Par exemple, avec Terser, nous pourrions utiliser une configuration comme celle-ci :

// Before minification
function calculateSum(a, b) {
  return a + b;
}

const result = calculateSum(5, 10);
console.log('The sum is: ' + result);

// After minification
function c(a,b){return a+b}const r=c(5,10);console.log('The sum is: '+r);
Copier après la connexion
Copier après la connexion
Copier après la connexion

Cette configuration réduit non seulement le code, mais supprime également les instructions de console, ce qui peut être utile pour les versions de production.

Pour la compression, bien que la configuration côté serveur soit cruciale, nous pouvons également utiliser des plugins webpack pour pré-compresser nos actifs. Le CompressionWebpackPlugin est idéal pour cela :

const loadModule = async () => {
  const module = await import('./heavyModule.js');
  module.doSomething();
};

document.getElementById('loadButton').addEventListener('click', loadModule);
Copier après la connexion
Copier après la connexion
Copier après la connexion

Ce plugin créera des versions gzippées de vos ressources à côté des versions originales, permettant une livraison de contenu encore plus rapide si votre serveur est configuré pour les utiliser.

Le chargement paresseux peut s'étendre au-delà des simples images. Nous pouvons l'appliquer à n'importe quelle ressource qui n'est pas immédiatement nécessaire. Par exemple, nous pourrions charger paresseusement une lourde bibliothèque tierce :

// utils.js
export const usedFunction = () => {
  console.log('This function is used');
};

export const unusedFunction = () => {
  console.log('This function is not used');
};

// main.js
import { usedFunction } from './utils.js';

usedFunction();
Copier après la connexion
Copier après la connexion
Copier après la connexion

De cette façon, la bibliothèque de graphiques n'est chargée que lorsque l'utilisateur souhaite voir le graphique, ce qui permet de conserver notre ensemble initial léger.

En matière d'analyse de bundles, les informations obtenues peuvent conduire à des optimisations surprenantes. Par exemple, j’ai découvert un jour qu’une bibliothèque de formatage de date ajoutait un poids important à mon offre. En le remplaçant par quelques fonctions personnalisées couvrant nos cas d'utilisation spécifiques, j'ai pu réduire considérablement la taille du bundle :

// Before minification
function calculateSum(a, b) {
  return a + b;
}

const result = calculateSum(5, 10);
console.log('The sum is: ' + result);

// After minification
function c(a,b){return a+b}const r=c(5,10);console.log('The sum is: '+r);
Copier après la connexion
Copier après la connexion
Copier après la connexion

Ce type d'optimisation ciblée, éclairée par l'analyse des bundles, peut conduire à des améliorations significatives des performances.

En conclusion, l'optimisation de la taille du bundle JavaScript est un processus à multiples facettes qui nécessite une bonne compréhension de la structure et des besoins de votre application. En mettant en œuvre ces techniques (fractionnement de code, tremblement d'arbre, minification, compression, chargement différé et analyse de bundles), nous pouvons réduire considérablement la taille de nos bundles et améliorer les performances des applications. N'oubliez pas que l'objectif n'est pas seulement d'avoir un forfait plus petit, mais d'offrir une expérience plus rapide et plus efficace à nos utilisateurs. À mesure que nous continuons à repousser les limites de ce qui est possible sur le Web, ces techniques d'optimisation ne feront que devenir plus cruciales.


101 livres

101 Books est une société d'édition basée sur l'IA cofondée par l'auteur Aarav Joshi. En tirant parti de la technologie avancée de l'IA, nous maintenons nos coûts de publication incroyablement bas (certains livres coûtent aussi peu que 4 $), ce qui rend des connaissances de qualité accessibles à tous.

Découvrez notre livre Golang Clean Code disponible sur Amazon.

Restez à l'écoute des mises à jour et des nouvelles passionnantes. Lorsque vous achetez des livres, recherchez Aarav Joshi pour trouver plus de nos titres. Utilisez le lien fourni pour profiter de réductions spéciales !

Nos créations

N'oubliez pas de consulter nos créations :

Centre des investisseurs | Centre des investisseurs espagnol | Investisseur central allemand | Vie intelligente | Époques & Échos | Mystères déroutants | Hindutva | Développeur Élite | Écoles JS


Nous sommes sur Medium

Tech Koala Insights | Epoques & Echos Monde | Support Central des Investisseurs | Mystères déroutants Medium | Sciences & Epoques Medium | Hindutva moderne

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal? Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal? Apr 04, 2025 pm 02:42 PM

Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...

Démystifier javascript: ce qu'il fait et pourquoi c'est important Démystifier javascript: ce qu'il fait et pourquoi c'est important Apr 09, 2025 am 12:07 AM

JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.

Qui est payé plus de python ou de javascript? Qui est payé plus de python ou de javascript? Apr 04, 2025 am 12:09 AM

Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.

Comment réaliser des effets de défilement de parallaxe et d'animation des éléments, comme le site officiel de Shiseido?
ou:
Comment pouvons-nous réaliser l'effet d'animation accompagné d'un défilement de page comme le site officiel de Shiseido? Comment réaliser des effets de défilement de parallaxe et d'animation des éléments, comme le site officiel de Shiseido? ou: Comment pouvons-nous réaliser l'effet d'animation accompagné d'un défilement de page comme le site officiel de Shiseido? Apr 04, 2025 pm 05:36 PM

La discussion sur la réalisation des effets de défilement de parallaxe et d'animation des éléments dans cet article explorera comment réaliser le site officiel de Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ...

L'évolution de JavaScript: tendances actuelles et perspectives d'avenir L'évolution de JavaScript: tendances actuelles et perspectives d'avenir Apr 10, 2025 am 09:33 AM

Les dernières tendances de JavaScript incluent la montée en puissance de TypeScript, la popularité des frameworks et bibliothèques modernes et l'application de WebAssembly. Les prospects futurs couvrent des systèmes de type plus puissants, le développement du JavaScript côté serveur, l'expansion de l'intelligence artificielle et de l'apprentissage automatique, et le potentiel de l'informatique IoT et Edge.

JavaScript est-il difficile à apprendre? JavaScript est-il difficile à apprendre? Apr 03, 2025 am 12:20 AM

Apprendre JavaScript n'est pas difficile, mais c'est difficile. 1) Comprendre les concepts de base tels que les variables, les types de données, les fonctions, etc. 2) Master la programmation asynchrone et les implémenter via des boucles d'événements. 3) Utilisez les opérations DOM et promettez de gérer les demandes asynchrones. 4) Évitez les erreurs courantes et utilisez des techniques de débogage. 5) Optimiser les performances et suivre les meilleures pratiques.

Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript? Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript? Apr 04, 2025 pm 05:09 PM

Comment fusionner les éléments du tableau avec le même ID dans un seul objet en JavaScript? Lors du traitement des données, nous rencontrons souvent la nécessité d'avoir le même ID ...

Zustand Asynchronous Operation: Comment assurer le dernier État obtenu par Usestore? Zustand Asynchronous Operation: Comment assurer le dernier État obtenu par Usestore? Apr 04, 2025 pm 02:09 PM

Problèmes de mise à jour des données dans les opérations asynchrones de Zustand. Lorsque vous utilisez la bibliothèque de gestion de l'État de Zustand, vous rencontrez souvent le problème des mises à jour de données qui entraînent des opérations asynchrones prématurées. � ...

See all articles