web-dev-qa-db-ja.com

NextJSでJS実行時間を短縮する

私は http://smodin.me というWebサイトを持っており、灯台のページ速度ランキングを最適化しようとしています。 nginxキャッシングを使用するSSRからexportPathMapおよびgetInitialPropsを使用してnext exportに切り替えました（nginxキャッシングを使用）。

関心のある特定のページ： https://smodin.me/free-english-rewriter-and-spinner （1か月あたり200万ヒットを取得しますが、他のページの読み込みは速くなりますが、問題は解決しません）。

静的に切り替えた後、「遅い3G」の場合、最初のコンテンツ画像は2〜2.5秒でロードされます。ただし、JSの実行時間は3〜6秒程度です。

enter image description here

質問：

  1. 静的エクスポートを使用しているときにスクリプトの評価に3〜6秒かかるのはなぜですか。

  2. Nextjs JS実行時間を最適化する方法はありますか？または多分webpack設定？

reactjswebpacknext.jspagespeedlighthouse
5
Kevin Danikowski

このようにいくつかの重いモジュールをラップしてみてください：

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>
  );
};

また、Preactを使用するなどのパフォーマンスが向上するかどうかを評価します。それがnextJSでどれほど簡単かはわかりません。私はこれを見つけました https://github.com/developit/nextjs-preact-demo

これは、SSRでレンダリングできないモジュールにも時々使用します。

2
Charley Bodkin