使用 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();
    }
}

Root/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 is not spliting vendor base on chucking point 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 时，结果包装在默认的属性上。

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

Route based code splitting with webpack not working, Chunks not generated

reactjs

webpack

code-splitting

react-loadable

mainRoutes.js

VDClient.js

Root/index.js