typescript - 如何在 react 应用程序中将代码拆分与 webpack 一起使用,并将组件导出为 export * from '...'

我正在尝试在我的 react 应用程序中使用代码拆分,总体而言它工作得很好,但我注意到捆绑分析器中有一些奇怪的东西。我的组件文件夹与所有组件一起加载到第一个块中(即使是那些仅用于延迟加载组件的组件)。

我认为问题在于我遵循使用 index.ts 文件导出组件的结构:/components:

  • /Component1
    • /Child1
      • Child1.tsx
      • index.ts
    • Component1.tsx
    • index.ts
  • /Component2
    • Component2.tsx
    • index.ts
  • 索引.ts

index.ts 文件只是像这样导出所需的组件

export * from './Component';

这和

import { Component } from './Component';

export { Component };

在 javascript 中。

通过这样做,我得到了非常漂亮的导入:

import { Component } from 'components';

没有深径和所有那些东西。

但我认为因为 webpack 无法识别如何拆分它,只是将其捆绑在一起。

有什么解决方案吗?也许我做错了什么?

我现在使用默认的 create react app 配置。

回答1

export * from './Component';

这导致 webpack 捆绑 './Component' 中的所有组件以及它导入的任何组件等等。

您应该单独导出组件而不使用 *

喜欢 export { Component1, Component2 } from './Component'

此外,如果您使用的是 Webpack 5,它会创建使用哪个组件导入的映射并丢弃未使用的组件。这在 Webpack 4 中不可用。

相似文章

twilio - DevTools 无法加载源 map

我知道Chrome开发工具中有很多关于这些警告的帖子。对于所有这些,解决方案是关闭通知“启用javascript源maps”和“启用CSS源maps”。我想知道的是如何解决这个问题,以及导致这些警告的...