前端资源优化 | Light文档

对前端工程当中的资源优化不外乎几个方面的原因：

减少流量
减少请求数
控制缓存

前端资源的类型包括js/css/html/图片/字体，针对不同的资源有着各自不同的优化方案。以下的内容将结合不同的资源类型提供几套针对性的方案供参考。同时为了方便使用，一些方案在lighting框架中进行了集成，我也将以lighting为例来说明如何在lighting工程中来使用对应的方案进行资源的优化。

针对js资源的优化措施

JavaScript控制着页面的行为，一个功能完善交互优化的html5应用必然存在着大量的JavaScript代码，对JavaScript代码的优化是前端资源优化的重头戏。

代码压缩

代码压缩可以减少代码的行数，并且通过对变量的混淆命名/移除注释等措施减少代码的整体的字节数。

在lighting中通过对编译指令添加一个-u选项可以启用代码压缩的能力。

light release -u

代码合并

代码合并可以减少资源总体的请求数，尤其是在http/1.1下对单域名下的总并发请求书有明确限制的情况下，通过对代码合并可以明显的提高代码的加载效率，提升页面的响应效率。

在lighting项目当中使用JavaScript代码的合并策略只需要配置特定的注解就可以了。

<!-- build:js js/app.js -->
<script type="text/javascript" src="js/lib/promise-7.0.4.js"></script>
<script type="text/javascript" src="js/lib/light-1.1.min.js"></script>
<script type="text/javascript" src="js/api/api.js"></script>
<!-- inject:view -->
<!-- endinject -->
<!-- endbuild -->

其中build:js的作用就是将注解所包含内容作为代码合并的输入源，并输出为js/app.js这个文件。

添加完注解之后还需要在编译指令中添加执行参数-c或者--concat，则在资源编译处理阶段就会触发代码合并的操作。

小文件内联

小文件内联也是减少页面请求数的一个有效的手段，对于一些片段化的js代码应该通过script标签的方式使用以免占用多余的请求链接。

异步加载

异步资源加载是减少页面首屏流量的一个相对有效的手段，通过对不是首屏无依赖的资源进行异步化的处理可以减少首屏的响应时间，获取更好的页面交互效果，流畅的交互体验。

在lighting的开发项目中使用JavaScript资源的异步加载有两种不同的方法。

异步视图

通过在视图定义的时候添加async=true属性，可以将此视图明确的辨识为异步视图。异步视图的js资源在视图第一次渲染的时候才会请求。

<view id="app" async="true"/>

异步资源

异步的js资源通过lighting框架的一个API来完成。

Light.require("./js/lib/jquery.js",function() {
  // console.log($)
})

针对css资源的优化措施

代码压缩

和对JavaScript进行代码压缩的方式一样，启用压缩选项也是通过一个-u参数完成的。

css资源的压缩会去除所有无用的注释和空行空格，减少资源的整体体积。

light release -u

代码合并

在lighting项目当中使用css代码的合并策略只需要配置特定的注解就可以了。

<!-- build:css css/app.css -->
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
<!-- endbuild -->

其中build:css的作用就是将注解所包含内容作为代码合并的输入源，并输出为css/app.css这个文件。

添加完注解之后还需要在编译指令中添加执行参数-c或者--concat，则在资源编译处理阶段就会触发代码合并的操作。

针对图片资源的优化方案

图片压缩

lighting-plugin-imagemin可以压缩页面图像，在不影响图片分辨率的情况下降低页面的访问流量，提升用户的使用体验。

图片压缩插件支持jpg和png类型的图片。

图片内联

对于一些通过img标签引入的小图片，虽然占用了极少的网络流量，但是依然需要占用浏览器对单域名限制下的并发连接数，会导致资源请求排队，从而影响页面的加载效率。

所以对于一些零碎的小图，最好的方案是通过内联的方式将图片经过base64编码后的结果直接标识在img标签的src属性上，从而达到降低页面请求数的目的。

背景图生成雪碧图

有时候为了保持h5应用的美观，会使用大量的细碎的背景图片以美化展示效果，这些背景图片在css文件加载完成后会立即排队到资源请求的队列里，从而影响页面分访问性能。

雪碧图可以有效的解决这个问题，lighting提供了对css样式背景图进行雪碧图拼接的插件，通过安装并启用lighting-plugin-sprites插件可以自动的将css中的背景图片进行整合合并生成雪碧图，不需要手动进行任何的代码调整。

light plugin -a sprites

图片延迟加载

对于有些列表页面，可能渲染的时候有很多图片需要加载，如果全部加载所有的图片，将是对带宽和连接数的极大浪费，这个时候就需要使用图片延迟加载的技术。

图片的延迟加载的原理是通过移除src属性来确保页面一开始加载不会有图片开始加载，而通过监听滚动条事件来触发对图片是否处于可是区域判断的结果来加载图片。

这样一来，图片加载会分多个批次进行加载，从而减少了首屏资源的流量，提高了运行效率。

针对字体资源的优化方案

资源内联

和之前介绍的的各种资源一样，小字体文件依然可以通过base64编码的方式引入到css文件中，以减少页面的请求数。

减少字体文件中字符的数量

尤其是对中文字符而言（中文有几万多个字符），每个字符都需要占用空间，但页面上不是每个字符都使用到了。应该仅仅对使用到的字符打包成字体。通过font-spider（字体蜘蛛）这一做到这一点。

其他优化方案

控制缓存

合理的缓存控制可以提升应用的加载和执行效率，缓存可以限制对相同资源发起的http请求，从而减少页面流量。一般请求下，我们都会在后台设置强力缓存，如max-age设置为30天。

如果在缓存失效的30天内发生了应用的集成打包，那么需要为每一个资源添加hash后缀以强制刷新缓存。

在lighting框架下，使用-s选项打包，可以为静态资源css/js添加hash后缀。

light release -s -p

开启GZIP

gzip可以有效的减少文本类资源的http请求流量，是减少页面整体流量十分有效的方式。