使用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

QGraphicsPixmapItem *
drawGraphicsPixmapItem(const QRectF &rect)
{
    auto pixmap = new QPixmap(rect.size().toSize());
    pixmap->fill("lightGrey");

    auto painter = new QPainter(pixmap);
    // set render hints bevor drawing with painter
    painter->setRenderHints(QPainter::Antialiasing);

    QPen pen;
    pen.setColor("black");
    pen.setWidth(3);
    painter->setPen(pen);
    QRectF rectT = rect;
    rectT.adjust(pen.widthF()/2,pen.widthF()/2,-pen.widthF()/2,-pen.widthF()/2);

    QPainterPath circlePath;
    circlePath.addEllipse(rectT);
    circlePath.closeSubpath();
    painter->fillPath(circlePath,QBrush("green"));
    painter->drawPath(circlePath);
    auto pixmapItem = new QGraphicsPixmapItem(*pixmap);
    pixmapItem->setCacheMode(
             QGraphicsItem::CacheMode::DeviceCoordinateCache,
             pixmap->size() );
    return pixmapItem;
}

使用const renderVendorDashboard = () => { import(/* webpackChunkName: "vddesktop" */ './Root/index').then(VDApp => { const component = VDapp.default; return <component /> }); } export default class VDClient extends Component { render() { renderVendorDashboard(); } } 时，结果将包装在默认属性上。