reactjs - 在 CRA 中使用带有 cssmodules 的 react lazy 会导致 block 在生产中具有重复的 css

Question

我在这里看到了类似的问题 Webpack chunk styles and react.lazy .

我正在使用 react lazy to 和 react-router 来进行基于路由的代码拆分。我有一个名为 Block 的可重用组件，它使用 cssmodules 和两个页面(实际上不止两个，但这只是一个例子)。它们都是延迟加载并多次使用 Block。

在生产中，Block 的样式似乎在页面的两个 block 中，因此当我最初加载 PageA 时，它各自的 block 被加载。一切都好。转到 PageB 也会导致加载其 block 。现在，当返回到 PageA 时，两个 block 都被加载，PageB 的样式会覆盖所有内容，从而破坏布局。

删除惰性导入解决了问题，但不是解决方案。虽然这是我的第一个 React 项目，但我很确定至少就我的理解而言，我做的每件事都是正确的。

为了说明这里的问题，在进入几页并返回到初始页面后，来自 devtools 的样式选项卡的屏幕截图

感谢任何帮助:)

Answer 1

这个包对我有用，解决了同样的问题。

https://loadable-components.com/

import loadable from '@loadable/component'
const OtherComponent = loadable(() => import('./OtherComponent'))
function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  )
}

好的部分是，它还拆分了库。

import loadable from '@loadable/component'
const Moment = loadable.lib(() => import('moment'))
function FromNow({ date }) {
  return (
    <div>
      <Moment fallback={date.toLocaleDateString()}>
        {({ default: moment }) => moment(date).fromNow()}
      </Moment>
    </div>
  )
}