使用webpack的基于路由的代码拆分不起作用，未生成块

Question

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

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

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

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

Answer 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 ，结果将包装在默认属性上。