reactjs - 使用 NextJS 减少 JS 执行时间

Question

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

感兴趣的特定页面流量很大

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

问题:

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

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

Answer 1

尝试像这样包装一些重型模块:

import dynamic from 'next/dynamic';
import { Spinner } from './spinner';

const MyLazyLoadedHeavyComponent = dynamic(() => import('./my-heavy-component'), {
  ssr: false,
  loading: () => <Spinner />
});

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>
      <MyLazyLoadedHeavyComponent />
    </div>
  );
};

有时我也会将其用于无法使用 SSR 渲染的模块。

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