使用 NextJS 减少 JS 执行时间

Question

我有一个网站，我正在尝试优化灯塔页面速度排名。我刚刚从使用 nginx 缓存的 SSR 切换到next export使用exportPathMap和getInitialProps（也使用 nginx 缓存）。

感兴趣的特定页面获得大量流量

切换到静态后，第一个内容图像出现在“慢 3G”的 2-2.5 秒内加载。但是 JS 执行时间需要 3-6 秒。

问题：

1. 当我使用静态导出时，为什么脚本评估需要 3-6 秒，我的印象是它会很快？

2. 有没有优化nextjs JS执行时间的方法？或者也许是 webpack 设置？

Answer 1

尝试包装一些像这样的重模块：

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

我有时也会将它用于无法使用 SSR 呈现的模块。

此外，评估尝试使用 Preact 之类的东西是否会提高性能。我不知道用 nextJS 做到这一点有多容易。我发现了这个https://github.com/developit/nextjs-preact-demo