如何用Javascript进行性能优化与代码分割？_技术教程

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)。

必须检查回调是否传入 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 报告说话。