Optimisation du loading bundle `cdtn-modeles` (~2MB) #5936

maxgfr · 2024-06-03T09:38:43Z

Problème

La page va loader en chunk le package modele qui pèse 2MB

Solutions

Une solution serait d'utiliser les web workers pour éviter de loader le script dans le bundle de la page pour gagner des performances SEO. Le but avec cette approche est d'éviter de bloquer le thread principal.

CF : https://partytown.builder.io/nextjs

import React from 'react';
import { Partytown } from '@builder.io/partytown/react';

function App() {
  return (
    <div className="App">
      <head>
        {/* Ajoutez vos scripts tiers avec l'attribut type="text/partytown" */}
        <script type="text/partytown" src="https://exemple.com/mascript.js"></script>
        {/* Intégrez le composant Partytown */}
        <Partytown debug={true} forward={['dataLayer.push']} />
      </head>
      <main>
        {/* Votre contenu d'application */}
      </main>
    </div>
  );
}

export default App;

L'autre solution serait d'utiliser le Lazy Loading. Cette méthode est bénéfique lorsqu'on charge un composant en entier. Or ici, on utilise une lib un peu partout. Avec NodeJS, on peut le faire directement du loading avec une fonction

async function loadModule(modulePath) {
  const module = await import(modulePath);
  return module;
}

// Utilisation de la fonction pour charger un module
(async () => {
  const myModule = await loadModule('./myModule.js');
  myModule.initialize(); // Supposons que myModule exporte une fonction initialize
})();

ou

mport React, { Suspense } from 'react';
const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Suspense fallback={<div>Chargement...</div>}>
          <MyComponent />
        </Suspense>
      </header>
    </div>
  );
}

export default App;

CF : https://react.dev/reference/react/lazy + https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import

maxgfr changed the title ~~Optimisation du bundle cdtn-modeles~~ Optimisation du loading bundle cdtn-modeles (~2MB) Jun 3, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Optimisation du loading bundle `cdtn-modeles` (~2MB) #5936

Optimisation du loading bundle `cdtn-modeles` (~2MB) #5936

maxgfr commented Jun 3, 2024 •

edited

Loading

Optimisation du loading bundle cdtn-modeles (~2MB) #5936

Optimisation du loading bundle cdtn-modeles (~2MB) #5936

Comments

maxgfr commented Jun 3, 2024 • edited Loading

Problème

Solutions

Optimisation du loading bundle `cdtn-modeles` (~2MB) #5936

Optimisation du loading bundle `cdtn-modeles` (~2MB) #5936

maxgfr commented Jun 3, 2024 •

edited

Loading