我有一个网站,正在尝试优化灯塔页面速度排名。我刚刚从使用 nginx 缓存的 SSR 切换到使用 exportPathMap
和 getInitialProps
(也使用 nginx 缓存)的 next export
。
感兴趣的特定页面流量很大
切换到静态后,第一个内容图像会在 2-2.5 秒内出现加载,“慢速 3G”。然而JS执行时间大约需要3-6秒。
问题:
当我使用静态导出时,为什么脚本评估需要 3-6 秒,我的印象是它会相当快?
有没有办法优化nextjs JS执行时间?或者也许是 webpack 设置?
最佳答案
尝试像这样包装一些重型模块:
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
关于reactjs - 使用 NextJS 减少 JS 执行时间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61450165/