使用 NextJS 减少 JS 执行时间答案

【问题标题】：reduce JS execution time with NextJS使用 NextJS 减少 JS 执行时间
【发布时间】：2020-08-10 11:50:49
【问题描述】：

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

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

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

问题：

为什么我使用静态导出时脚本评估需要 3-6 秒，我的印象是它会很快？
有没有办法优化nextjs JS执行时间？或者可能是 webpack 设置？

【问题讨论】：

当我在禁用 javascript 的情况下打开该页面时，我确实获得了所有内容，脚本在用户可以与页面交互之前加载并执行，但所有静态 html 内容似乎在初始加载时都存在。
也许尝试延迟导入一些您知道可能非常大的模块，以便您的用户可以进行较低的脚本评估。我还建议通过分析开发工具进行一些审计。
我认为这包括所有额外的广告服务脚本，对吧？
是的，这包括广告服务脚本，它们会减慢页面速度，对此我无能为力。 @HMR我确实在除重写器部分之外的所有内容上添加了延迟加载，它没有任何不同，我认为这只是重写器部分的逻辑。看看能不能懒加载一部分，不确定静态导出是否支持懒加载，值得研究。
想尝试使用lazyload吗？

标签： reactjs webpack next.js pagespeed lighthouse

【解决方案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

【讨论】：

嘿查理，我接受了，因为赏金只剩下 30 分钟，但它实际上并没有对我有太大帮助。我实际上已经在 90% 的应用程序上使用了这种动态设置，但没有成功，我将尝试在 10% 的较重部分上使用它，看看会发生什么。至于 preact，我已经考虑过了，但是我在某些位置有一些复杂的钩子逻辑，我认为 preact 不支持这些逻辑，特别是在一页上。我的页面是完全静态的，并且逻辑仅在您使用不应该太重的文本输入区域时运行。任何其他建议表示赞赏:)
可悲的是，我试图用这个来改进它，但什么也没做很多。
@KevinDanikowski 你找到解决这个问题的办法了吗？
@Mayank-Dolphin nope :/ 我实现了静态导出但没有成功。我还没有尝试过useStaticProps，我打算在未来尝试。