Блог

Главная - Вопросы по программированию - Замедленная загрузка в предварительно подготовленных маршрутах не работает

Замедленная загрузка в предварительно подготовленных маршрутах не работает

#reactjs #frontend #lazy-loading #preact

Вопрос:

Я пытаюсь использовать ленивую загрузку в 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]

что случилось?

Комментарии:

1. Какой инструмент сборки вы используете? Как вы лениво импортируете Form ?

2. Вы используете Preact-CLI? Если это так, я не верю, что ожидание поддерживается. Однако есть и другие способы разделения кода, поэтому я напишу ответ, показывающий, как это сделать.

Ответ №1:

С помощью Preact-CLI приостановка не поддерживается при предварительном запуске. См. preact-cli#1359. Вы можете отключить предварительный просмотр с preact build --no-prerender помощью .

Существуют и другие методы разделения кода, описанные в файле ReadMe проекта, такие как использование определенных каталогов или использование async! префикса при импорте.

Ответ №2:

Я думаю, что в настоящее время это экспериментальная функция, и это ошибка в preact.

Комментарии:

1. Нет, это не имеет никакого отношения к Преакту. Средство сборки, Preact-CLI, не поддерживает приостановку при предварительном запуске. Это известное ограничение, и для него открыта существующая проблема, см. раздел preact-cli#1359 .

Метки: