Preact 路由中的延迟加载不起作用答案

【问题标题】：Lazy loading in Preact routes not workingPreact 路由中的延迟加载不起作用
【发布时间】：2021-09-21 21:51:37
【问题描述】：

我正在尝试在 preact 中使用延迟加载，这是我的代码 (routes/form-page.js)：

import {lazy, Suspense} from 'preact/compat';
.
.
.
const Form = lazy(() => import("../components/form"));

const FormPage = () => {
    const classes = useStyles();

    return (

        <Grid container justifyContent="center" className={classes.root}>
            <Suspense fallback={<Grid item xs={10} className={classes.suspense}>Loading ...</Grid>}>
               <Form/>
            </Suspense>
        </Grid>
    )
};

在开发中没问题，但在构建中（运行preact build），它返回错误：

ERROR Template execution failed: [object Promise]

怎么了？

【问题讨论】：

您使用的是什么构建工具？你怎么懒惰导入Form？
你在使用 Preact-CLI 吗？如果是这样，我认为不支持悬念。不过还有其他方法可以进行代码拆分，所以我会写一个答案来说明如何进行。

标签： reactjs frontend lazy-loading preact

【解决方案1】：

使用 Preact-CLI，预渲染时不支持悬念。见preact-cli#1359。您可以使用 preact build --no-prerender 禁用预呈现。

项目ReadMe 中概述了其他代码拆分方法，例如使用某些目录或在导入中使用async! 前缀。

【讨论】：

【解决方案2】：

我认为它目前是一个实验性功能，它是一个预先存在的错误。

【讨论】：

不，它与 Preact 无关。构建工具 Preact-CLI 不支持预渲染时的悬念。这是一个已知的限制，并且存在一个针对它的现有问题，请参阅preact-cli#1359。