0

我正在尝试在嵌套路由上的应用程序中实现基于路由的代码拆分。

我想将主路由子路由分解为与主块分开的块。

mainRoutes.js

... (other routes)
{
    path: '/dashboard',
    component: VDClient,
},
... (other routes)

VDClient.js

const renderVendorDashboard = () => {
    import(/* webpackChunkName: "vddesktop" */ './Root/index').then(VDApp => {
        return <VDApp />
    });
}

export default class VDClient extends Component {
    render() {
        renderVendorDashboard();
    }
}

根/index.js

import vdRoutes from './vdRoutes'; // file similar to mainRoutes.js but contains the child routes for `/dashboard/` eg: `/dashboard/list`, `/dashboard/add` etc.

class VendorDashboard extends Component {
    componentWillMount() {
        ...
    }
    render() {
        ...
        <div>
            <Switch>
                {vdRoutes.map(route => routeWithSubRoutes(route, this.props.match.params, this.props.match.url))}
            </Switch>
        </div>
    }
}

构建完成后，我可以看到除 vddesktop 块之外的所有块。我在这里错过了什么吗？

生成的其他块不包含路由或路由代码/dashboard，这是预期的行为。所有的进口都是有序的，所以我认为这不应该是一个问题。

我也尝试过使用 react-loadable，但不幸的是，这给了我一个全新的 webpack 4 问题。

参考： webpack 4 react loadable 不会根据夹点拆分供应商基础 https://github.com/jamiebuilds/react-loadable/pull/110

请让我知道我是否可以提供更多可能有助于解决此问题的信息。这将是一个巨大的帮助。

4

1 回答 1

1 
const renderVendorDashboard = () => {
    import(/* webpackChunkName: "vddesktop" */ './Root/index').then(VDApp => {
      const component = VDapp.default;
      return <component />
    });
}

export default class VDClient extends Component {
    render() {
        renderVendorDashboard();
    }
}

使用import时，结果被包装在一个默认属性上。

于 2018-07-16T11:54:43.900 回答