核心是“减法思维”+“按需交付”：砍掉不用代码、分层加载资源、让缓存精准生效；精简依赖（如用dayjs替代moment）、外置压缩静态资源、路由与组件级懒加载、Service Worker分层缓存策略。
优化 PWA 的包体积和加载性能，核心是“减法思维”+“按需交付”：砍掉不用的代码、把资源分层加载、让缓存真正起作用。
精简依赖与代码体积
第三方库是包体积膨胀的主因，尤其全量引入时。比如 moment 95KB、quill 213KB，而 date-fns 或 dayjs 同样功能仅 2–5KB；lodash 全量引入约 70KB，改用 lodash-es + 按函数导入（如 import { debounce } from 'lodash-es'），可压缩到 3KB 左右。
- 用
webpack-bundle-analyzer分析依赖构成，识别“大而无用”的包 - 移除重复垫片（如
whatwg-fetch和axios共存时，统一用 axios 内置能力） - 替换 heavy UI 库（如 mint-ui）为轻量方案（如 Just.js 工具函数或原生组件封装），单个工具函数常小于 200 字节
- 确保构建配置开启
tree-shaking和minimize: true，并设置sideEffects: false（或明确列出有副作用的文件）
静态资源外置与压缩
图片、字体等静态资源占体积比常超 50%，本地打包最不划算。
- 所有图片迁移到 CDN，并统一转为 WebP/AVIF 格式（体积减少 25%–50%）
- 建立本地路径 → CDN 路径映射表，避免硬编码，例如：
const imageMap = { '/images/banner.png': 'https://cdn.example.com/miniapp/banner.webp' }; - 使用
loading="lazy"原生懒加载非首屏图片；关键图（如 banner）配合srcset+sizes实现响应式加载 - 图标类资源优先用 inline SVG 或 iconfont，避免多个小 PNG 请求
按需加载与代码分割
用户不该为没访问过的页面下载全部 JS。
立即学习“Java免费学习笔记（深入）”；
- 路由级懒加载：React 用
lazy+Suspense，Vue 用异步组件defineAsyncComponent - 非路由场景（如弹窗、富文本编辑器）也应动态导入：
const Quill = await import('quill')，首次触发才加载 - Webpack 配置中启用
SplitChunksPlugin，自动提取公共模块（如 vendor），避免重复打包 - 对大型工具库做手动拆包，例如将 utils 拆为
utils/date.js、utils/dom.js，按需引用
Service Worker 缓存策略精细化
缓存不是越多越好，而是“分层管控”：
- HTML：网络优先，失败后 fallback 到缓存（保证内容时效性）
- CSS/JS/字体：缓存优先，后台静默更新（提升复访速度）
- 图片/静态资源：长期缓存（如 max-age=30d），配合版本化命名（
logo-v2.webp）避免脏缓存 - API 数据：短时缓存（如 1 小时），并设置 stale-while-revalidate 策略，兼顾新鲜度与可用性
- 每次发布新版本时，在 SW 中递增缓存名称（如
cache-v2.3），激活后自动清理旧缓存池
不复杂但容易忽略
