通过 index.js 重新导出 JSS 导致不相关组件中的不必要的重新渲染

问题描述

我有一个大型代码库，其中使用了带有 it's 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

这是演示 repo，基于快速刷新 repo here 中的示例

解决方法

事实证明只需升级到 webpack 5 即可修复它，您可以在此 branch

查看更新的存储库