import() 更适合代码分割，因其动态导入可延迟加载非关键代码，避免首屏包体积膨胀，但需注意调用位置、路径限制及配合 react.lazy 的默认导出要求。
为什么 import() 比 import 语句更适合代码分割
静态 import 会在模块加载时无条件拉取所有依赖，导致首屏 JS 包体积膨胀。而 import() 是动态导入，返回 Promise，能延迟加载非关键路径的代码，比如路由组件、模态框逻辑或图表库。
常见错误是把 import() 当作普通函数随意调用，却忽略它不能出现在条件语句外层（如 if 块外直接写）、不支持表达式作为模块路径（如 import(`./${name}.js`) 在 Webpack 中受限，Vite 支持但需满足字符串字面量约束）。
- 只在用户交互或满足特定条件时触发，例如点击按钮后加载编辑器：
button.addEventListener('click', () => { import('./editor.js').then(module => module.init()); }); - 配合
React.lazy时，必须用默认导出，否则会报Element type is invalid - Webpack 中需配置
splitChunks.chunks: 'all'，否则动态导入可能被合并回主包
如何用 requestIdleCallback 避免主线程卡顿
不是所有逻辑都值得立刻执行。像日志上报、非实时状态同步、预加载低优先级资源这类任务，适合塞进空闲时段执行，避免抢占渲染或响应输入的时机。
注意 requestIdleCallback 在 Safari 中长期不支持，且 Chrome 已标记为“deprecated”（但暂未移除），生产环境应加降级：直接执行或用 setTimeout(..., 0)。
立即学习“Java免费学习笔记（深入）”；
- 必须检查回调是否传入
deadline，并用deadline.timeRemaining() > 0判断是否还能继续执行 - 不要在空闲回调里做 DOM 写操作（如
el.innerHTML = ...），否则可能触发强制同步布局 - 一次空闲周期内尽量完成小批量工作，避免超时后被中断导致状态不一致
哪些 console 调试行为会拖慢生产构建和运行时
console.log 看似无害，但在大量循环或高频回调中，它不仅增加输出开销，还会阻止 JS 引擎对函数做某些优化（如内联）。更隐蔽的是，部分打包工具（如 Terser）默认不会删掉 console，除非显式配置 drop_console: true。
- Terser 配置示例（webpack）：
optimization: { minimize: true, minimizer: [ new TerserPlugin({ terserOptions: { compress: { drop_console: true } } }) ] } - 开发时可用
eslint-plugin-no-console拦截未删的调试语句 - 替代方案：用
performance.mark()+performance.measure()做轻量级性能埋点，不影响执行流
为什么 Object.freeze() 对 React/Vue 组件状态没用
有人以为给初始 state 加 Object.freeze() 就能提升渲染性能，其实这是误解。现代框架的响应式系统（如 Vue 的 Proxy、React 的 useState 更新机制）不依赖对象是否可变，而是靠 setter 触发更新。冻结对象反而可能导致开发时难以调试（比如 state.xxx = 123 静默失败）。
真正有效的做法是减少不必要的重渲染：React 用 React.memo + 浅比较，Vue 用 shallowRef 或 markRaw 标记大型不可响应对象。
-
Object.freeze()只在极少数场景有用：防止第三方库意外修改你的配置对象（如const config = Object.freeze({ apiHost: '...' })） - 若用 Redux Toolkit，
createSlice默认用 Immer，内部已处理不可变更新，无需手动 freeze - 对大型数组/对象做
JSON.parse(JSON.stringify())深拷贝再 freeze，纯属浪费 CPU 和内存
import()，或者某段计算是否真的需要放进 requestIdleCallback。这些地方没有银弹，得靠 performance.now() 和真实设备上的 Lighthouse 报告说话。 
