返回

reactjs-NextJS 应用程序上的 Lazy Hydrate + 代码拆分

发布时间:2022-06-09 17:42:38 355
# html# 服务器# 服务器# 黑客

我知道如何进行惰性水合作用,我知道如何进行代码拆分,但如何仅在组件水合作用时才能进行拆分的chunck下载?

我的代码如下所示

import React from 'react';
import dynamic from 'next/dynamic';
import ReactLazyHydrate from 'react-lazy-hydration';

const MyComponent = dynamic(() => import('components/my-component').then((mod) => mod.MyComponent));

export const PageComponent = () => {
  return (
    ...
    
      
    
    ...
  );
};

MyComponent在折叠下方渲染,这意味着只有当用户滚动时,它才会水合。问题是JS chunckMyComponent将在页面加载时立即下载。

我可以通过仅在客户端上使用动态导入来破解它,但这会使组件在水合时消失一秒钟,因为react不会使用服务器上呈现的html。它将重新创建DOM元素,在加载JS chunck之前,该元素将为空。当元素消失一秒钟后,页面CLS会增加,这就是我不能使用此黑客的主要原因。这是这个黑客的代码

const MyComponent = typeof window === 'undefined'
    ? require('components/my-component').MyComponent
    : dynamic(() => import('components/my-component').then((mod) => mod.MyComponent));

请注意,我想在服务器渲染器上渲染组件的HTML。这就是为什么我不想懒洋洋地加载它。我想延迟水合物,这样我就可以在服务器上呈现组件的HTML,但只在组件可见时下载并执行它的JS。

特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报
评论区(2)
按点赞数排序
用户头像