首屏秒开
从后台数据留意到, 部分用户打开 http://xiyu.zhiyuanbiji.cn/#/chat 页面, 但还没有等到页面曝光, 用户就很快流失了. 初步怀疑是首屏打开渲染时间过长, 我自己在手机上, 当网络状况不好的情况下, 有时打开耗时也较长, 那么对于新用户, 肯定没有这个耐心的. 五一假期做的第一项优化就是首屏的速度.
希羽: http://xiyu.zhiyuanbiji.cn 采用的是前后端分离的架构, 后端是 Java, 前端是 Vue 2 + Element UI, 而且整个前端是个单页面应用, 打包好, 就一个 JS 文件和一个 CSS 文件, 其中 JS 文件较大, 接近 6.7M, CSS 文件接近 1M, 如下图所示.
在网络状况好的情况下, JS 文件加载, 需要 773ms, CSS 文件加载, 也需要 418ms, 如下图所示.
你可能留意到, 上图中, JS 文件的 Size 只有 2.0M, 跟之前说的接近 6.7M 对不上, 然而, 文件确实是同一个. 这是因为, 这个静态文件存放在阿里云的 OSS 上, 它自动做了 gzip 压缩, 如下图所示.
接下来, 就看如何缩小首屏加载的资源文件的大小, 一个自然的想法是做文件拆分. 这里用到的技术是 VueRouter 的 route level code-splitting, 详情参见官方资料: https://v3.router.vuejs.org/zh/guide/advanced/lazy-loading.html
我们直接来看, 最终优化后的效果, JS 文件仅 342kB, 加载仅需 150ms, 仅需原来五分之一的时间; CSS 文件的体积变化不大, 但由于并发请求两个文件, JS 减少了, CSS 文件也更快完成了加载, 仅需原来不到一半的时间.
动态验证码登录
有人说, 希羽不方便在电脑端登录, 因为手机微信扫描二维码以后, 返回的直接登录链接, 不方便复制到电脑上打开, 但很多办公提效的场景, 又希望在电脑端完成. 于是, 做了第二项优化, 增加动态验证码登录, 如下图所示
通过「知源笔记」公众号, 获取动态登录码, 方便快捷, 无需单独注册.
开启新的对话
这是一个很简单的功能, 但挺实用的, 当对话上下文过长, 或者就需要开启一次新对话时, 点击该按钮即可.
好了, 就写到这里了, 如果你经常使用「希羽·对话」功能, 你有什么想法或建议, 欢迎加入我们的群聊
