React中型项目的优化实践(二)

② 首屏加载

首屏加载,大概是优化的永恒话题,所有的优化都避不开这一个话题,因为只有它能最直观的让“大家”都感受到我们这次优化的成果。对于用户来说,认为网页首屏很快的标准其实很单一,就是一打开页面,看了多久的白屏。,围绕这一点,个人认为,首屏加载这一优化可以有两个方向:一个是速度,另一个是体验。

引入加载占位

其实这个就是前段时间很火的“骨架屏”,我们可以在页面真正被渲染出来之前,先给用户看到一个“假的”页面,等到某个时间节点(例如数据已经准备完毕…)就将真正的内容替换上去。这里有一个我写的很不走心的例子:)

在这个优惠券列表页面我的处理方案是,初始化页面的时候就渲染3个列表项骨架,等待接口数据返回就将真实内容替换上去。

在我们的首屏其实也是类似的,我们可以根据首屏的展示结构,做一个匹配的骨架组件,然后按需求进行展示即可,这样可以有效减少用户看到白屏的时间。下面是我这个骨架的代码,优化的空间很大,不过由于优先级不是很高,所以就没有进行迭代了。

大概结构就是这样,样式方面很粗暴,因为每一项都是独立的一个组件,直接可以用absolute定位堆砌一个简洁的占位列表项。里面那个类似进度条的效果则是通过css3的animation实现的,我们可以将每个block的背景色变成渐变的,然后通过background-positon的变化来达到图中的效果。

图片懒加载

这应该是个老生常谈的优化方向了,原理大概是将视图之外的图片都用同一个占位图进行占位,将其真正的图链接存在data-*中,通过监听滚动来判断图片是否进入视图中,来控制img标签src的值。具体的实现很多地方都能搜到,大家可以根据自身情况,按需选择。

不要将页面都放到一个篮子里(二)— 懒加载

其实在整个优化过程中我的重心是放在这个地方的,其他的都是半路上想到的…

让我们回想一下,上面我们讲过将低频页面分离,那么,必然就有会那么几个访问量十分高的页面,那么对于这几个页面应该怎么办呢?

因为访问频率高,所以我们可以认为这些页面与我们的核心业务是强相关的,所以将其分离就显得不那么划算了(很可能会出现维护多套代码的窘况)。

但是这样高频页面才是优化的重点区域呀,应该怎么办呢?面对这样页面我们还是可以使用懒加载大法(页面懒加载 || 组件懒加载 || 依赖懒加载)。

想要在js层面实现各类懒加载,我们都需要借助webpack中的特性Code Splitting,它可以将我们本来打包在一起的js分解成一块一块,并能达到按需加载并使用的效果。

页面懒加载

因为我们使用了react-router,所以我们可以使用react-router的getComponent轻松达到页面懒加载这一需求。如下图所示,将mainpage这样引入route的话,在打包的时候会将其分离成一个独立的js。

组件懒加载 && 依赖懒加载

组件和依赖的懒加载也是十分简单的,如下图这样写就能达到懒加载的效果,但如果我们使用了babel则需要修改一下babel的配置,让它能够顺利解析动态import()的语法。

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180613G21LOQ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券