前端性能优化的思考

[qinyuanf]

前端性能优化的思考（by 元丰）

背景

...

架构优化

• 开发启动速度和生产环境打包速度优化，升级 webpack4+node10+babel 7

• dll 层权衡。使用 dll 层，单独打包不常更新的 npm 包，但会影响首页加载速度；不使用则会降低打包速度

• 多线程压缩 js，目前 webpack 4 默认使用的 terser-webpack-plugin 自带

• 开启多线程 loader 编译，happypack 效果不是很明显，主要针对（js/css/less）

• 给 loader 加入缓存，cache-loader 的应用，第一次编译仍旧会慢，整体编码体验得到改善

• 随着项目的进一步增大，本地开发提供友好的路由注释方案

• 重新梳理微信分享逻辑

• 微信分享的异步引入包有问题，在 vuex 中将 mutations 改为 actions

• 降级状态下 asyncData 和 afterEach 调用分享更新接口顺序无法确认，asyncData 可能存在异步接口，需要查找更好的生命周期

• 缩小 dll 层第三方包的引入，减小打包体积

• lodash 改为按需引入，统一封装 lodash 方法，用到才引入

• 去除 swiper，使用组件库自带组件

• 输出 eslint/tslint/stylelint 配置规则，并编写校验规范

• 分析 gtrace、sentry 常见线上报错

• 不断修复常见错误

• 基于以上错误，不断完善 代码 review 该看什么？

• 单元测试调用及运用

• 分析哪些场景下需要单元测试

• 普通工具方法和 Vue 通用组件的单元测试用例编写

• Vue SSR 架构解读

• 理清服务端渲染的生命周期

• 从根本上解决微信分享问题

• 调研服务端渲染骨架屏方案

• 重新分析页面缓存机制

• 权衡客户端数据预取方案

• 调研 pwa 和 service-work

• 明确相关技术在当前项目中的使用情况

用户体验优化

• App 内双头问题，x-header 重写

• 支持变色

• 支持背景上透

• 结合已有 App 内部实现，优化 ap

• 输出组件 x-header-plus

• APP 内跳转容器页面使用 app_disable_navbar=1 来隐藏原生头部

• iPhoneX 等设备适配

• 页面滚动布局总结

• 基于 body 滚动的布局（传统）

• 基于 flex 的局部滚动布局

• 对滚动事件的监听使用节流

• 与组件库中滚动组件结合使用

• 输出滚动组价 x-scroll-container

• App 内部 H5 返回场景调研

场景：a->b->c->d->e，e页面上存在某个按钮，点击按钮回到b页面，点击b的返回按钮回到a

• a -> b 调用 App 原生方法打开新容器 pushWindow，回到首页关闭当前容器 closeWindow

• 图片优化

• 优先使用 jpg（2x/3x），其次使用 png8（如小 icon）

• 图片懒加载的正确使用

• 圆角图片由前端实现

• iconfont 的推广及使用

• 使用 lottie 来编写轮播动画

• 页面跳转卡顿

• 单页跳转必须等待 asyncData 内部数据请求完成才会跳转（数据预取的时机）

• 多页跳转 window.location.href 的形式，app 需要排查原因

• 打开新容器页面加载慢，优化缓冲动画，优化请求接口

• 从交互层面出发，为按钮点击增加用户反馈

• 接口请求优化

• 以并发的形式编写前后无关联的请求

• 与后端配合，优化部分页面接口请求速度，理想状态 200ms 以内

• 接口超时原因排查（基于 sentry、gtrace）

• 其他优化

• 使用 sessionStorage 优化表单页面（宇清、元丰）

• 防抖节流的正确使用

• 编写页面时尽可能避免重绘与回流

• 在合适的场景下为 H5 页面的跳转增加转场动画（依赖正确的数据预取形式）

• 目前发布过程中会拷贝整个 node_modules，是否可以优化？