前端性能优化二十一：静态文件打包方案

1. 打包方案落地:

①. 公共组件拆分:
    a. 业务中有N个js文件,把公用的js文件抽离出来,做成组件.
    b. 其它文件直接调用这个组件即可.
    c. 在用户访问时,js文件的大小是比较少的.
    d. 公用部分在其它页面也不用再加载,直接走cdn文件的缓存即可.

②. 压缩:
    JS、CSS、图片

③. 合并:
    a. 一个业务页面可能有N个css、js、图片文件.
    b. 进行js、css文件、图片合并后,可以将多个小文件请求合并为一个大文件请求.
    c. CSS Sprite

④. 服务端处理方案:
    a. Combo:
       (1). js、css文件Combo,http://cdn.com/??a.js,b.js
       (2). 服务端会自动把a.js和b.js合成,可以减少开发成本.

---

2. 静态文件版本号更新策略?

①. 缓存更新:
    a. 把一个文件放到cdn上之后,每个文件都有缓存时间.
    b. 一般进入cdn后台、nginx后台刷新文件路径,后台的shell脚本就会更新对应文件header头中缓存配置信息.
    c. 等这个缓存时间过了后,用户本地就会请求到最新文件内容.
    d. 问题是如果上线的项目、bug,用户看到的还是旧的.

②. 版本号:
    a. 在文件后面加一个版本号用于区分:
       (1). 文件name.v1-v100.js
    b. 按功能区分:
       (1). 大功能迭代每次新增一个大版本,如由v1到v2
       (2). 小功能迭代新增加0.0.1或者0.1.0,如从v1.0.0至v1.0.1
    c. 在迭代过程中,线上可能会有多个版本存在,可以在一个时间点通过nginx统一配置所有版本至最新版.

③. 静态文件版本号更新策略:
    a. 时间戳格式:
       (1). 时间戳.文件name.js
       (2). 以每次上线时间点做差异.
       (3). 如果是将文件夹以时间戳命名,有些不需要改变的文件,也会重新加载一次.
    b. 文件hash格式:
       (1). 文件hash.文件name.js
       (2). 以文件内容hash值做key,每次上线文件路径不一致. => 如果文件内容变更,hash就会变.