reactjs - 使用 Lazy + Suspense 反应预加载组件
问题描述
我目前正在使用带有 Suspense 和 Lazy 的 React 16 来对我的代码库进行代码拆分。虽然我想预加载组件。
在下面的示例中,我有两条路线。有没有办法在安装Demo
后立即预Prime
加载?我试图在componentDidMount
页面中创建另一个动态导入Prime
,但React.lazy
似乎没有得到与下面的动态导入相同的文件。
import React, { lazy, Suspense } from 'react';
import { Switch, Route, withRouter } from 'react-router-dom';
import GlobalStyle from 'styles';
import Loading from 'common/Loading';
const Prime = lazy(() => import(/* webpackChunkName: "Prime" */'modules/Prime'));
const Demo = lazy(() => import(/* webpackChunkName: "Demo" */'modules/Demo'));
const App = () => (
<main>
<GlobalStyle />
<Suspense fallback={<Loading>Loading...</Loading>}>
<Switch>
<Route path="/" component={Prime} exact />
<Route path="/demo" component={Demo} />
</Switch>
</Suspense>
</main>
);
export default withRouter(App);
因此,我尝试了不同的方法,例如使用和不使用webpackChunkName
以及在 中导入其他组件的不同方式,componentDidMount
如下所示。导入文件的前两种方法componentDidMount
导致了下图底部显示的 Webpack 错误。只有第三个继续,但2.[hash].js
在图像中制作文件,仅在访问页面后加载,而不是在componentDidMount
我在这里想念什么?
代码modules/Demo.jsx
:
import React from 'react';
import LogoIcon from 'vectors/logo.svg';
import PageLink from 'common/PageLink';
import Anchor from 'common/Anchor';
import CenteredSection from 'common/CenteredSection';
const Demo = () => (
<CenteredSection variant="green">
<LogoIcon />
<PageLink to="/" variant="green">Go to home page</PageLink>
</CenteredSection>
);
export default Demo;
解决方案
这非常容易做到,我认为对 lazy() 和 Suspense 在幕后所做的事情存在误解。
React.lazy() 唯一的期望是它需要一个函数,该函数返回一个使用默认组件解析的 Promise。
React.lazy(() => Promise<{default: MyComponent}>)
所以如果你想预加载,你所要做的就是提前自己执行承诺。
// So change this, which will NOT preload
import React from 'react';
const MyLazyComp = React.lazy(() => import('./path/to/component'));
/*********************************************/
// To this, which WILL preload
import React from 'react';
// kicks off immediately when the current file is imported
const componentPromise = import('./path/to/component');
// by the time this gets rendered, your component is probably already loaded
// Suspense still works exactly the same with this.
const MyLazyComp = React.lazy(() => componentPromise);
这是一个已知的签名,这一事实使其可用于各种其他情况。例如,我有一堆依赖于动态加载的谷歌地图 api 的组件,我能够创建一个加载谷歌地图 api 然后导入组件的函数。我不会详细介绍这个示例的内部结构,因为它是一个切线,但重点是我为自己创建了一个函数,它执行一堆异步操作,然后返回一个带有 {default: Component} 对象的 Promise。
import React from 'react';
const MyLazyComp = React.lazy(() => importMapsComponent('./path/to/comp'));
推荐阅读
- python - 我需要为列表返回什么,我是否需要边缘案例重复的代码?
- python - ElasticSearch+Pyspark 读取性能慢
- function - 在 Visual Studio 的下拉列表中不按字母顺序列出成员函数
- flutter - setState 来自外部的 showDialog()
- php - Laravel 迁移回滚
- android - 如何使用 SQLite 内容提供程序和 itemOnClickListener 删除 ListView 中的单个项目
- google-chrome - 谷歌浏览器:避免关闭固定标签
- jquery - django.jQuery 不是函数
- flutter - 如何在 Flutter Qibla 中找到 Qibla 角度
- ios - Swift:警告说当用户访问不允许的 URL 时它被阻止