reactjs - 通过 index.js 重新导出 JSS 会导致不相关组件中出现不需要的重新渲染

Question

我有一个大型代码库，其中使用了带有JSS的 Material UI。

jss/
  a.js Default or named export `astyle` 
  b.js Default or named export `bstyle`
  index.js - Re-exports the JSS 

所有其他文件导入如import { astyle } from './jss'

ComponentA.jsx - contains `import { astyle } from './jss'`
ComponentB.jsx - contains `import { bstyle } from './jss'`
App.jsx - imports ComponentA and ComponentB

更新a.js导致ComponentB重新渲染的原因，有什么办法可以告诉 webpack 不要重新加载整个jss/index.js？

组件工作正常

componets/
  ComponentC.jsx - default or named export
  ComponentD.jsx - default or named export
  index.js - Re-exports the components

App.jsx - import { ComponentC, ComponentD } from './components'

更新ComponentC不会重新渲染ComponentD或components/index.js

我正在寻找破坏性最小的解决方案，并且不希望通过文件名直接导入所有样式摆脱jss/index.js

这是演示存储库，基于此处的快速刷新存储库中的示例

Answer 1

结果只是升级到 webpack 5 修复了它，你可以在这个分支查看更新的 repo