核心是剔除首屏无需的代码，按用户行为和页面结构逻辑拆分：非首屏区域、路由级功能、高开销低频模块、第三方插件等应动态加载；用 import() 包裹在事件回调或 IntersectionObserver 中，并加 catch 处理；HTML 片段优先 fetch + insertAdjacentHTML；稳定全局组件可构建时内联。
核心是把“不用的代码”从首屏加载中剔出去，只留真正需要的部分。不是简单切文件，而是按用户行为和页面结构做有逻辑的拆分。
识别哪些代码可以拆出去
先看实际页面结构：导航栏、轮播图、商品列表、页脚这些模块，如果彼此独立、加载时机不同，就适合单独成块。比如用户点“分类”才需要弹出分类组件，那这部分逻辑就不该随首页一起下载。
常用判断依据：
- 非首屏区域（如折叠内容、底部推荐、弹窗）
- 路由级功能（如“我的订单”页的全部逻辑）
- 高开销但低频使用的模块（图表库、富文本编辑器、PDF预览）
- 第三方插件或独立业务组件（登录弹层、客服浮窗）
用动态 import() 做真正按需加载
关键不是写 import()，而是它出现在哪里。顶层写 import('./xxx.js') 会被打包工具当作静态导入，失去拆分意义。
立即学习“前端免费学习笔记（深入）”；
正确做法：
- 包裹在事件回调里：按钮点击、菜单展开、Tab切换时触发
- 配合 IntersectionObserver：当组件进入视口再加载（适合长列表中的卡片、评论区）
- 加错误处理：必须 catch，否则加载失败会静默中断，页面卡住或白屏
示例：
button.addEventListener('click', () => {import('./CategoryPanel.js')
.then(module => module.init(el))
.catch(() => el.innerHTML = '加载失败，请重试');
});
HTML 片段类组件优先用 fetch + insertAdjacentHTML
如果只是结构+样式，没有复杂交互（比如通用 header、banner、footer），用 JS 动态加载 HTML 字符串比加载 JS 模块更轻量，也绕过 CSP 对 eval 的限制。
注意三点：
- 用 insertAdjacentHTML('beforeend', html)，别用 innerHTML，防止意外执行 script 标签
- 路径以入口 HTML 所在目录为基准；可用 new URL('./header.html', import.meta.url) 构造绝对路径
- 重复请求时加 cache: 'force-cache' 或时间戳参数，避免开发环境返回旧缓存
构建时内联适用于稳定不变的全局组件
像版权信息、固定导航这类内容几乎不更新，直接在打包阶段展开到 HTML 中最稳妥。
优势明显：
- 零运行时请求，兼容 IE11（只要最终输出没用 ES6+ 语法）
- 路径解析清晰：src 始终相对于入口 HTML，不随 JS 位置变化而失效
- 无资源生命周期问题，不用管卸载清理
限制也很明确：不能传参，带变量的组件（如
