使用 NextJS 减少 JS 执行时间

Posted 2023-02-22

【中文标题】使用 NextJS 减少 JS 执行时间

【英文标题】：reduce JS execution time with NextJS

【发布时间】：2020-08-10 11:50:49

【问题描述】：

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

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

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

问题：

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

有没有办法优化nextjs JS执行时间？或者可能是 webpack 设置？

【问题讨论】：

当我在禁用 javascript 的情况下打开该页面时，我确实获得了所有内容，脚本在用户可以与页面交互之前加载并执行，但所有静态 html 内容似乎在初始加载时都存在。

也许尝试延迟导入一些您知道可能非常大的模块，以便您的用户可以进行较低的脚本评估。我还建议通过分析开发工具进行一些审计。

我认为这包括所有额外的广告服务脚本，对吧？

是的，这包括广告服务脚本，它们会减慢页面速度，对此我无能为力。 @HMR我确实在除重写器部分之外的所有内容上添加了延迟加载，它没有任何不同，我认为这只是重写器部分的逻辑。看看能不能懒加载一部分，不确定静态导出是否支持懒加载，值得研究。

想尝试使用lazyload吗？

【参考方案1】：

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

import dynamic from 'next/dynamic';
import PreDynamicState from './PreDynamicState';

const DynamicInnerComp = dynamic(() => import('./MyHeavyModule'), 
  s-s-r: 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>
  );
;

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

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

【讨论】：

嘿查理，我接受了，因为赏金只剩下 30 分钟，但它实际上并没有对我有太大帮助。我实际上已经在 90% 的应用程序上使用了这种动态设置，但没有成功，我将尝试在 10% 的较重部分上使用它，看看会发生什么。至于 preact，我已经考虑过了，但是我在某些位置有一些复杂的钩子逻辑，我认为 preact 不支持这些逻辑，特别是在一页上。我的页面是完全静态的，并且逻辑仅在您使用不应该太重的文本输入区域时运行。任何其他建议表示赞赏:)

可悲的是，我试图用这个来改进它，但什么也没做很多。

@KevinDanikowski 你找到解决这个问题的办法了吗？

@Mayank-Dolphin nope :/ 我实现了静态导出但没有成功。我还没有尝试过useStaticProps，我打算在未来尝试。