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

【问题标题】：Dynamic path import for lazy loading of components using react-loadable使用 react-loadable 延迟加载组件的动态路径导入
【发布时间】：2019-04-03 04:57:30
【问题描述】：

我正在使用 create-react-app 创建一个应用，并使用 react-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')）并调用它起作用的函数。但是当我像上面的代码一样使用它时，Loader 会加载，但它不会再继续加载组件了。如果我在导入中使用变量，为什么它不起作用？

【问题讨论】：

标签： reactjs lazy-loading code-splitting react-loadable

【解决方案1】：

找到答案here

“要让 Webpack 处理导入，它至少需要能够大致猜测 import() 的引用是什么。”

原来你的路径不能太匿名。猜猜它堆积到很深，Webpack 才能自信地知道我正在导入什么。

【讨论】：

【解决方案2】：

据我所知，捆绑器（Webpack）需要能够预先处理文件路径。

我的问题是为什么需要它？光写有什么不好的吗？

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

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

奖励点：看看new React's lazy API，最近在 16.6 中发布。链接页面也有一些关于代码拆分的好信息。

【讨论】：

对不起。我只是不认为处理多个页面会非常有效。我还打算将它用于多个文件，但我想这是不可能的，除非它们堆叠得太深以至于 webpack 无法定位。另外我的反应是 16.5 所以 .lazy 还没有包括在内。

【解决方案3】：

为了简化配置延迟加载，解决方案如下：

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
)

【讨论】：