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

【问题标题】：Reexporting JSS via index.js causing unwanted rerenders in unrelated components通过 index.js 重新导出 JSS 会导致不相关组件中出现不需要的重新渲染
【发布时间】：2021-05-23 02:04:12
【问题描述】：

我有一个大型代码库，其中正在使用带有 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中的示例

【问题讨论】：

标签： reactjs webpack webpack-dev-server fast-refresh

【解决方案1】：

原来只是升级到 webpack 5 修复了它，你可以在这个branch查看更新的 repo

【讨论】：