使用NextJS缩短JS执行时间
使用NextJS缩短JS执行时间
提问于 2020-04-27 01:00:06
我有一个网站，我试图优化灯塔网页速度排名。我刚刚使用exportPathMap和getInitialProps (也是nginx缓存)从带有nginx缓存的SSR切换到了getInitialProps。
感兴趣的特定页面的流量很大
切换到静态后，第一个内容映像将在2-2.5s内显示为“慢速3G”负载。然而，JS的执行时间大约需要3-6秒。
问题：
- 为什么脚本评估需要3-6s，当我使用静态导出时，我的印象是它会非常快？
- 是否有优化nextjs JS执行时间的方法？或者是webpack的背景？
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-05-15 12:16:52
尝试包装一些重模块，如下所示：
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
Stack Overflow用户
发布于 2022-04-05 08:04:14
你试过这一建议的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()
})
}}
/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61450165
复制相关文章
相似问题
腾讯云开发者
