请阐述结合 Webpack 构建工具与浏览器 LocalStorage 来实现前端静态资源离线缓存的具体做法有哪些？
考察说明
考查对前端离线缓存方案的理解，包括构建工具与浏览器存储的结合使用。
回答思路
- 【回答框架 1】Webpack 负责在构建阶段生成带内容 hash 的静态资源文件名，如 main.[hash].js，这为实现离线缓存提供了版本控制基础。
- 【回答框架 2】利用 Webpack 的 html-webpack-plugin 和 manifest 或相关插件，可以生成资源清单文件，记录静态资源的文件名与对应 hash。
- 【回答框架 3】在应用启动时，通过 fetch 或 XHR 获取资源清单，将需要缓存的静态资源以 key-value（如文件名-hash 对应资源内容）形式存入 LocalStorage。
- 【回答框架 4】后续请求静态资源时，先检查 LocalStorage 中是否存在对应 hash 的资源，若存在则直接使用本地副本，否则从网络获取并更新缓存。
- 【回答框架 5】注意 LocalStorage 容量限制（通常 5MB 左右），并且存储的是文本数据，适合缓存体积较小的 JS/CSS 文件，不适合大体积图片或视频。
- 【关键点 1】Webpack 的 hash 文件名保证资源更新时 URL 变化，从而控制缓存更新。
- 【关键点 2】LocalStorage 容量有限，仅适合小体积文本资源，需考虑淘汰策略。
- 【关键点 3】应用启动时需先获取资源清单，再决定是否从本地读取。
- 【易错点 1】LocalStorage 是同步操作，大量资源读写会阻塞主线程，应控制资源体积和数量。
- 【易错点 2】不同浏览器对 LocalStorage 的容量限制不一致，超限写入会抛出异常。
- 【易错点 3】仅依赖 LocalStorage 无法覆盖复杂离线场景，通常需要配合 Service Worker 实现更完整的离线支持。