Импорт динамического пути для отложенной загрузки компонентов с помощью react-loadable

Я создаю приложение с помощью create-react-app и лениво загружаю компонент с помощью react-loadable.

Я хочу импортировать динамические пути для объекта загрузчика или функции Loadable модуля react-loadble.

Код:

const LoadableComponent = path =>
 Loadable({
  loader: () => import(`${path}`),
  loading: Loader,
 })

const Home = LoadableComponent('./../../pages/Home')
const User = LoadableComponent('./../../pages/User')

Если я помещаю строку пути вместо переменной пути (например, import ('./ pages / Home')) и вызываю функцию, она работает. Но когда я использую его, как приведенный выше код, загрузчик загрузится, но больше не будет загружать компонент. Почему не работает, если я использую переменную при импорте?


reactjs lazy-loading code-splitting react-loadable
person vhie    schedule 30.10.2018    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Нашел ответ здесь

«Чтобы Webpack мог обрабатывать импорт, он должен иметь возможность хотя бы приблизительно догадываться, на что должна ссылаться import ()».

Оказывается, ваш путь не может быть слишком анонимным. Думаю, он слишком сложен, чтобы Webpack мог уверенно знать, что я импортирую.

person vhie    schedule 30.10.2018

arrow_upward
1
arrow_downward

Насколько мне известно, сборщик (Webpack) должен иметь возможность заранее обрабатывать путь к файлу.

У меня вопрос, зачем это нужно? Есть ли что-нибудь настолько плохое в том, чтобы просто писать?

const Home = Loadable({
  loader: () => import('./pages/Home'),
  loading: Loader,
})

const User = Loadable({
  loader: () => import('./pages/User'),
  loading: Loader,
})

Бонус: ознакомьтесь с новым lazy API React, недавно выпущенным в версии 16.6. На связанной странице также есть полезная информация о разделении кода.

person Mike    schedule 30.10.2018
comment
Извините. Я просто не думаю, что использование нескольких страниц будет очень эффективным. Также я планировал использовать его для нескольких файлов, но я думаю, это было бы невозможно сделать, если они не сложены слишком глубоко, чтобы их можно было найти в webpack. Также моя реакция - 16,5, поэтому .lazy еще не включен. - person vhie; 30.10.2018

arrow_upward
0
arrow_downward

Чтобы упростить отложенную загрузку конфигурации, решение выглядит следующим образом:

import React, {Component, lazy, Suspense} from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from "react-router-dom";
let routers={
    '/about': import('./pages/about'),
    '/contact':  import('./pages/contact'),
}

class Content() extends Component{
   render(){
     return (<Switch>
        {Object.keys(this.props.routers).map((path, idx) => {
            let Child = lazy(()=>this.props.routers[path])
            return (
                <Route path={path} key={idx}>
                    <Suspense fallback={<div>Loading...</div>}>
                        <Child></Child>
                    </Suspense>
                </Route>)
        })}
    </Switch>
   }
}

ReactDOM.render(
    (
    <BrowserRouter>
        <div>
            <ul>
                <li><Link to="/about"> About</Link></li>
                <li><Link to="/contact">Contact</Link></li>
            </ul>
            <Content routers={config.routers}></Content>
        </div>
    </BrowserRouter>
    ),
    document.getElementById('root') as HTMLElement
)
person neo    schedule 20.06.2020