3

我正在使用 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 会加载，但它不会再继续加载组件了。如果我在导入中使用变量，为什么它不起作用？

4

3 回答 3

4

在这里找到了答案

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

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

于 2018-10-30T08:38:13.790 回答
1

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

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

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

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

加分点：看看最近在 16.6 中发布的新 React 的lazyAPI 。链接页面也有一些关于代码拆分的好信息。

于 2018-10-30T08:38:27.260 回答
0

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

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
)
于 2020-06-20T07:13:35.793 回答