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()的语法。