如何解决通过 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
查看更新的存储库版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。