使用 react-loadable 延迟加载组件的动态路径导入

Question

I am creating an app using create-react-app and lazy loading the component using react-loadable.

What I want to do is import dynamic paths for the loader object or the Loadable function of react-loadble module.

Code:

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

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

If I put the path string in the place of the path variable (Ex. import('./pages/Home')) and call the function it works. But when I use it like the code above Loader will load but it will not continue to load the component anymore. Why doesn't it work if I use the variable in import?

Answer 1

Found the answer here

"For Webpack to handle an import, it needs to be able to at least guess roughly what an import() is meant to be referencing."

Turns out your path cannot be too anonymous. Guess it is stacked to deep for Webpack to confidently know what I am importing.

Answer 2

As far as I know, the bundler (Webpack) needs to be able to process the file path upfront.

My question would be why is it required? Is there anything so bad about just writing?

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

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

Bonus point: Take a look at new React's lazy API , recently release in 16.6. The linked page also has some good information on code splitting.

Answer 3

To simplify config lazy loading,the solution likes below:

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
)