web-dev-qa-db-fra.com

réduire le temps d'exécution JS avec NextJS

J'ai un site Web, http://smodin.me , que j'essaie d'optimiser le classement de la vitesse des pages de phare. Je viens de passer de SSR avec mise en cache nginx à next export en utilisant exportPathMap et getInitialProps (également avec la mise en cache nginx).

Page d'intérêt spécifique: https://smodin.me/free-english-rewriter-and-spinner (obtient 2 millions de visites/mois, les autres pages se chargent plus rapidement mais ont toujours le problème).

Après le passage en statique, la première image de contenu apparaît chargée en 2-2,5s pour "3G lente". Cependant, le temps d'exécution de JS prend environ 3-6 secondes.

enter image description here

Questions:

  1. Pourquoi l'évaluation des scripts prend-elle 3 à 6 secondes lorsque j'utilise une exportation statique, j'avais l'impression que ce serait assez rapide?

  2. Existe-t-il des moyens d'optimiser le temps d'exécution de nextjs JS? Ou peut-être un paramètre Webpack?

reactjswebpacknext.jspagespeedlighthouse
5
Kevin Danikowski

Essayez d'encapsuler des modules lourds comme ceci:

import dynamic from 'next/dynamic';
import PreDynamicState from './PreDynamicState';

const DynamicInnerComp = dynamic(() => import('./MyHeavyModule'), {
  ssr: false,
  loading: () => <PreDynamicState />
});

export const MyQuicklyLoadingPage: FC = () => {
  return (
    <div>
      <h1>Welcome to the page!</h1>
      <p>You'll see this text</p>
      <p>Before we load the heavy stuff below</p>
      <p>Large markdown files containing lots of images, etc.</p>
      <DynamicInnerComp />
    </div>
  );
};

Évaluez également si quelque chose comme essayer d'utiliser Preact améliorera les performances. Je ne sais pas à quel point c'est facile de faire cela avec nextJS. J'ai trouvé ceci https://github.com/developit/nextjs-preact-demo

J'utilise aussi parfois ceci pour les modules qui ne peuvent pas être rendus avec SSR.

2
Charley Bodkin