Tip

热更新有效性

由于 HMR 热更新的有效性，与 webpack 生成 chunk 的机制有关，相当于某个chunk中内容改变，当前chunk被替换。
实际开发中，chunk的替换，与整个页面被重置/刷新，并没有太大区别，此时如果需要重点调试某个部位或组件，可以将那部分内容包裹动态导入，以达到强制分离成单独chunk的效果，优化HMR体验：

// 独立文件准备导入
const A = () => some jsx;
export default A;
// 使用
const Test = React.lazy(() => import('./Test'));
<React.Suspense fallback="111">
  <Test />
</React.Suspense>