由 dawei 移动H5资讯项目常面临首屏加载慢、白屏时间长、资源冗余及兼容性差等痛点。编译策略需从构建阶段就介入，而非仅依赖运行时优化。
采用Webpack 5 + 构建时动态分包：将公共库（如Vue、Axios）抽离为vendor包，资讯业务模块按频道（体育/财经/娱乐）拆分为异步chunk，配合路由级import()实现按需加载。同时启用module federation初步探索微前端能力，支撑多团队并行开发与独立发布。
资源压缩需分层处理：HTML用html-minifier删除注释与空白；CSS通过cssnano合并重复规则、移除未使用选择器（配合PurgeCSS扫描Vue模板）；JS启用TerserPlugin，开启drop_console和pure_funcs，但保留错误堆栈映射以保障线上调试。
图片与字体深度优化是关键一环：所有图片经sharp批量转为WebP格式，并生成srcset响应式路径；图标统一采用SVG雪碧图或内联SVG，避免HTTP请求；中文字体使用font-spider进行子集化，仅打包页面实际用到的汉字，体积减少70%以上。
针对低端安卓机型做兼容降级：编译时通过Babel targets精准配置最低支持版本（如Android UC 12.1），禁用非必要Polyfill；CSS中谨慎使用gap、:has()等新特性，辅以postcss-preset-env自动回退。
建议图AI生成，仅供参考
首屏性能闭环监控必不可少：在构建产物中注入轻量级性能埋点脚本，采集FP、FCP、TTI等指标；结合SourceMap解析真实错误堆栈；每次CI发布后自动对比Lighthouse评分变化，低于阈值即阻断上线。
最终交付物为纯静态资源，全部托管至CDN并配置强缓存（max-age=31536000）、协商缓存及Brotli压缩。通过预加载关键资源、DNS预解析第三方接口域名、服务端开启HTTP/2，将核心页面首屏时间稳定控制在1.2秒内（3G网络实测）。