Introduction : le problème de l'alourdissement des projets

Les applications front-end modernes souffrent souvent d'une augmentation progresssive de leur volume au fur et à mesure de l'ajout de fonctionnalités. Cette croissance entraîne des temps de chargement plus longs et une dégradation de l'expérience utilisateur. Le framework umi, populaire dans l'écosystème React, intègre un mécanisme de tree shaking performant pour éliminer automatiquemant le code inutilisé.

Fonctionnement du tree shaking

Le tree shaking est une technique d'optimisation statique qui analyse les dépendances du code JavaScript pour identifier et supprimer les modules non référés. Ce mécanisme requiert l'utilisation du système de modules ES6 pour une analyse efficace.

Implémentation dans umi

1. Configuration Webpack sous-jacente

umi utilise Webpack comme bundler par défaut, avec une configuration optimisée pour le tree shaking :

// Configuration optimisée de Webpack dans umi
const buildConfig = {
  optimization: {
    usedExports: true,
    minimize: true,
    sideEffects: false,
    concatenateModules: true
  }
};

2. Utilisation du système de modules ES6

Pour bénéficier du tree shaking, il faut privilégier les imports nommés spécifiques :

// Importation ciblée recommandée
import { Select, DatePicker } from 'antd';
import { debounce } from 'lodash-es';

// À éviter : importation globale
import * as UIComponents from 'antd';
const utils = require('lodash');

3. Déclaration des effets de bord

La configuration du fichier package.json permet d'identifier les fichiers avec des effets de bord :

{
  "sideEffects": [
    "**/*.css",
    "**/*.less",
    "**/*.scss"
  ]
}

Guide d'optimisation pratique

Configuration du projet

Dans le fichier de configuration umi, on peut affiner les options de construction :

// Configuration avancée
export default {
  build: {
    chunks: ['vendors', 'app'],
    splitChunks: {
      cacheGroups: {
        commonLibs: {
          name: 'common',
          test: /[\\/]node_modules[\\/]/,
          chunks: 'initial'
        }
      }
    }
  }
};

Optimisation des bibliothèques tierces

Importation partielle d'Ant Design

// Configuration babel pour l'import à la carte
const babelConfig = {
  plugins: [
    ['import', {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: true
    }]
  ]
};

Utilisation de lodash-es

// Remplacement de lodash par lodash-es
import { merge, cloneDeep } from 'lodash-es';

Conception des composants supportant le tree shaking

// Exportation individuelle des composants
export { default as NavBar } from './NavBar';
export { default as Sidebar } from './Sidebar';
export { default as Footer } from './Footer';

// Alternative avec ré-exportation ciblée
export { Button as PrimaryButton } from './buttons/Button';
export { Modal as AlertModal } from './modals/Modal';

Techniques avancées

Chargement paresseux et découpage du code

// Chargement dynamique des composants
const Dashboard = React.lazy(() => import('./Dashboard'));

// Configuration des routes avec découpage
const routesConfig = [
  {
    path: '/admin',
    component: dynamic(() => import('./AdminPanel'))
  }
];

Analyse des bundles

# Installation de l'outil d'analyse
npm install -D webpack-bundle-analyzer

# Intégration dans la configuration
export default {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      reportFilename: 'bundle-report.html'
    })
  ]
};

Optimisations runtime

// Paramètres de performance dans umi
export default {
  runtime: {
    polyfill: false,
    momentLocaleOptimization: true,
    cssMinification: 'esbuild'
  }
};

Résolution des problèmes courants

Surveillance et métriques

// Script de monitoring des bundles
const fs = require('fs');
const zlib = require('zlib');

function measureBundleSize(bundlePath) {
  const fileContent = fs.readFileSync(bundlePath);
  const originalSize = fileContent.length;
  const compressedSize = zlib.gzipSync(fileContent).length;
  
  return {
    path: bundlePath,
    size: originalSize,
    compressed: compressedSize
  };
}

Recommandations de développement

• Adopter exclusivement la syntaxe des modules ES6
• Privilégier les imports spécifiques pour les bibliothèques volumineuses
• Configurer soigneusement la propriété sideEffects des paquets
• Maintenir des modules avec un couplage faible et des responsabilités claires

Bonnes pratiques de construction

# Directives pour l'équipe de développement

## Normes d'importation
- ✅ import { fonctionSpécifique } from 'module'
- ❌ import * as Module from 'module'

## Critères de sélection des bibliothèques
- Préférer les versions avec support ES modules
- Éviter les bibliothèques polluant le namespace global

## Points de vérification en code review
- Identifier les imports inutilisés
- Valider la configuration des effets de bord
- Suivre l'évolution de la taille des bundles