Question

我正在使用create-react-app创建一个应用，并使用react-loadable延迟加载该组件。

我要做的是为加载器对象或react-loadble模块的Loadable函数导入动态路径。

代码：

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

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

如果我将路径字符串放在路径变量（例如import（'./pages/Home'））的位置，然后调用它起作用的函数。但是，当我使用它时，就像上面的代码一样，Loader将加载，但不再继续加载该组件。如果我在import中使用变量，为什么它不起作用？

Answer 1

找到了答案here

“为了使Webpack能够处理导入，它必须至少能够大致猜测出import（）所要引用的内容。”

结果证明您的路径不能太匿名。猜猜它堆积得很深，Webpack可以自信地知道我要导入的内容。

Answer 2

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

我的问题是为什么要这样做？仅仅写东西有什么不好的？

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

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

加分点：看一下{1}中最新发布的new React's lazy API。链接的页面还提供了一些有关代码拆分的良好信息。

Answer 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
)

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

3 个答案: