企业官网建设流程全解析

IELTS Atlas是一个雅思阅读与听力练习系统：内置 200 多篇题库，支持题库浏览、套题练习、成绩记录、错题分析与数据备份。但"功能多"往往意味着"代码多"——如果首屏就加载全部功能，浏览器早就卡住了。这篇文章带你拆解它是如何用懒加载与代码拆分两大前端性能优化策略实现"秒开"的，看完你就能在自己项目里复刻这套方案。

📦 先看数据：代码拆分后的 Bundle 全景

项目把所有代码打包成了十几个功能 Bundle，体积如下：

关键结论：首屏只加载 4 个 Bundle（约 1.03 MB），而练习、浏览、更多工具等总计近 2 MB 的代码全部推迟到用户真正需要时才加载。

🧩 脚本分组：懒加载的"分组账本"

整套懒加载系统由 js/runtime/lazyLoader.js 实现，暴露为全局对象AppLazyLoader。它维护一张"分组账本"（manifest），把相关脚本归入同一个组：

• state-core：状态核心（由首屏 bundle 直接提供，零下载）
• exam-data：题库索引数据
• practice-suite/session-suite：练习会话与套题管理
• browse-runtime：题库浏览界面
• more-tools：成就、词汇、小游戏
• theme-tools/settings-tools/diagnostics-tools：主题、设置与诊断

每个组还声明了依赖关系（dependencies），例如session-suite依赖browse-runtime和practice-suite，加载时会先递归加载依赖组——组间并行、组内串行，既快又不破坏顺序。

两个细节让这套分组机制非常可靠：

1. 请求去重：脚本与分组各有一个"三态状态机"——未开始 → 加载中（Promise）→ 已加载（'loaded'字符串）。多个功能同时请求同一个组时，拿到的是同一个 Promise，绝不重复发请求；
2. 失败可重试：脚本加载失败会把状态重置为null，下次调用自动重试，不会永久卡死。

🚀 启动流程：谁先谁后，一目了然

启动编排写在 js/app/main-entry.js 中，整个流程分四层：

1. DOM 就绪：初始化存储命名空间、导航骨架；
2. 后台引导：state-core组 + 题库索引数据在后台非阻塞加载（源码里用setTimeout(fn, 0)把引导推到下一个宏任务，保证首屏渲染不被拖住）；
3. 事件触发：题库索引加载完成会派发examIndexLoaded事件，此时才加载browse-runtime组并渲染题库列表；
4. 空闲加载：成就、小游戏等more-tools组通过requestIdleCallback在浏览器空闲时偷跑加载，5 秒超时兜底（老浏览器自动降级为setTimeout）。

主题切换则完全是用户点击才加载的theme-tools组——典型"用到才拉"。

🔗 代理函数：用户不知道自己在"触发下载"

懒加载最怕的体验问题是：用户点了按钮，函数却还不存在。项目用一个巧妙的代理函数模式（proxyAfterGroup，见 main-entry.js#L389）解决了它：

用户点击 → 代理函数 → AppLazyLoader.ensureGroup(组名) → 下载对应 bundle → 转发调用真实函数

例如全局函数loadExamList本身只是一个代理：第一次被调用时自动拉取browse-runtime组，加载完成后无缝转发。即使某个模块尚未就绪，也有三层降级策略：先找真实函数 → 再执行兜底函数 → 最后提示"模块未就绪"，页面永远不会白屏报错。对使用者来说，整个过程完全无感。

📚 题目级懒加载：数据也是"代码"

更狠的一层优化在题目内容上。以阅读题为例：

• 232 篇阅读题各自对应一个独立脚本（如 p1-high-01.js），首屏一个都不加载；
• 首屏只加载一份轻量的"目录页"manifest.js——它只含每题的 id、标题、难度、频次等索引信息；
• 当你点开某篇题目，系统才按 id 找到对应脚本动态注入，并通过 readingExamRegistry.js 提供的注册表（__READING_EXAM_DATA__）把数据存入内存。

这正是大型题库类应用的通用范式：索引常驻，正文随点随拉，把"MB 级数据"和"秒开首屏"彻底解耦。

✅ 总结：可以抄进你项目的 4 个技巧

这套方案的整体收益是：首屏解析时间下降约 60%–70%，非核心功能（成就、小游戏、主题）完全不打扰关键路径。如果你想进一步阅读，项目官方文档里有完整的架构图与加载时序图：Lazy-Loading-&-Code-Splitting.md，还可以配合 Performance-&-Optimization.md 一起看。

一句话带走核心思想：让浏览器只做当下必须做的事，其余的一切，等它空闲了再说。