使用 NextJS 减少 JS 执行时间

Question

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

感兴趣的特定页面访问量很大

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

问题：

为什么我使用静态导出时脚本评估需要 3-6 秒，我的印象是它会很快？
有没有办法优化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

Answer 2

你试过 this suggestion Next.js 了吗？我认为这正是你的情况。

<input
  type="text"
  placeholder="Country search..."
  className={styles.input}
  onChange={async e => {
    const { value } = e.currentTarget
    // Dynamically load libraries
    const Fuse = (await import('fuse.js')).default
    const _ = (await import('lodash')).default

    const fuse = new Fuse(countries, {
      keys: ['name'],
      threshold: 0.3
    })

    const searchResult = fuse.search(value).map(result => result.item)

    const updatedResults = searchResult.length ? searchResult : countries
    setResults(updatedResults)

    // Fake analytics hit
    console.info({
      searchedAt: _.now()
    })
  }}
/>

使用 NextJS 减少 JS 执行时间

reduce JS execution time with NextJS

pagespeed

lighthouse

reactjs

webpack

next.js