H5开发优化标准指南

按需引入，避免无用资源。大资源进行拆分。
例1：分享类H5需引用【微信jssdk】，在微信中展示开发标签或二次分享时使用，但APP内H5无需使用。
方案：分场景配置模板页面，按需使用
例2： sensors.js 引入页面但没有调用，sensor仍会执行初始化，被打包进bundle
首屏没有引用的第三方资源，通过CDN等进行延迟加载
https://www.cnblogs.com/jiasm/p/7683930.html
例子：photoswiper，首屏渲染不会使用，点击图片时才调用。
方案：

lazyLoad https://webpack.js.org/guides/lazy-loading/
https://www.cnblogs.com/jiasm/p/7683930.html
使用preload对chunk等初始化需要的资源提升加载优先级
是一种 resource hint，用来指定页面加载后很快会被用到的资源，所以在页面加载的过程中，我们希望在浏览器开始主体渲染之前尽早 preload。

3. 照片查看器引入
   ● 图片查看器模块通过 cdn 方式引入，通过设置 defer 或 async 进行设置异步加载，不阻塞页面加载速度，可以更快看到首屏内容

Vue-Cli 默认启用
https://cli.vuejs.org/zh/guide/html-and-static-assets.html#preload
使用dns-prefetch对CDN域名进行预解析【实验行功能】

业务资源CDN加速，列表中用小尺寸图，预览时用中大尺寸。图片列表使用lazyload。

?x-oss-process=image/resize,w_400  //可按需调整图片宽度

app.use(VueLazyLoad, {
  preload:1.3,
  attempt:1,
  listenEvents:['scroll','resize','animationend','transitionend','touchmove','touchstart','touchend']
})

字体
字体按需进行裁剪，尽量选用woff、woff2等有压缩的格式
对于特殊字体的文本，采用渐进展示的方案：

font-display: swap;

使用预编译和骨架屏
对于页面结构固定的分享类、表单类等H5，推荐对页面首屏基本布局和元素，进行骨架屏预编译，避免页面首屏加载白屏，提升用户体验。
骨架屏生成工具：
react-content-loader
vue-content-loader
模板预编译方案：

1. CRA脚手架工具：
   https://create-react-app.dev/docs/pre-rendering-into-static-html-files/
2. Next.js 生成预编译的模板页面
   https://www.nextjs.cn/docs/basic-features/pages#%E9%9D%99%E6%80%81%E7%94%9F%E6%88%90%EF%BC%88%E6%8E%A8%E8%8D%90%EF%BC%89
3. 客户端渲染出骨架屏代码后手动Copy到模板页面
   缓存
   页面请求使用协商缓存，保证用户能及时访问最新版本；
   前端资源使用强制缓存，cache-control: max-age=31536000
   业务资源：客户端上传图片时，是否要设置缓存？？？业务资源的生命周期只有一次？！

离线包
安卓具备离线包能力，iOS还没有。
根据业务重要程度和双端对齐情况而定。

性能监控及错误收集

1. sentry
2. 使用web-vitals进行性能收集
   https://github.com/GoogleChrome/web-vitals/
   兼容PC端展示

提测后，对页面性能进行分析，保证80+分