Question

我有动态导入可以很好地用于node_modules，但是我无法使它适用于React组件。这些只是被编译到依赖它们的文件中。

我不知道这可能是什么原因，也不知道如何调试拆分。

不确定是否相关，但是React组件大于30kb。

我确实更新了tsconfig.json以支持代码拆分：

{
  "allowSyntheticDefaultImports": true,
  "target": "es5",
  "module": "esnext",
  "moduleResolution": "node",
}

除了可能的输出外，我的webpack.config.js中没有为动态代码拆分配置任何相关内容：

output: {
    path: path.join(__dirname, "wwwroot"),
    publicPath: "/wwwroot/",
    filename: "[name].js"
},

这对于以异步方式加载的node_module依赖项非常适用：

private async loadComponent(): Promise<void> {
    const NivoBar = await import(/* webpackChunkName: "nivo-bar" */ "@nivo/bar");
    this.setState({ bar: NivoBar.Bar });
}

但是，这不适用于我的React组件，后者只是被编译为入口文件：

private async loadComponent(): Promise<void> {
    const fup = await import(/* webpackChunkName: "fileuploadpopup" */ "portal/components/fileUpload/FileUploadPopup");
    this.setState({ fileUploadPopup: fup.default });
}

这可能是什么原因？

Answer 1

原来，还有另一个组件与该组件具有（非异步）依赖关系，这就是webpack决定对其进行编译的原因。仍然不知道如何使用webpack对其进行调试...

React / Webpack / TypeScript-无法动态导入组件

1 个答案: