@Mercedes-Benz
2018-08-25T05:57:55.000000Z
字数 2724
阅读 642
性能优化
建立前端资源版本化管理缘起前后端发版谁先谁后，发版期间、之后的缓存的失效问题以及希望优化网站提升体验的目的。
本任务思路参照了知乎上的一个问题《大公司里怎样开发和部署前端代码？》，通过张云龙的回答，简单的实现了其中的部分需求，在使用前阅读此回答可以简单的了解到本任务的想法思路。
Node 10.xnpm install 安装由目录内 package.json 指明的插件gulp 的，故执行任务时，需输入 gulp 任务名，如：gulp prod。前端资源管理的文件夹分为两大个 test 和 main：
test (针对后端开发、线下测试时用，内容为前端源码生成后的未经压缩混淆的内容，便于定位问题，主要服务器是53、72，之所以是两台是便于有两个任务同时进行时使用)
main（跟 test 目录一致，只不过此目录下的资源 都是压缩混淆过的，主要用于预发(215)、灰度(160)、线上生产环境）
都是直接执行 组合任务，以下只是说明单个任务的目的。
| 任务 | 说明 |
|---|---|
| img | 生成带指纹的 img 图片 |
| 任务 | 说明 |
|---|---|
| css:copy | 先将文件复制到版本化的文件夹内便于修改（不影响外面的文件） |
| css:replaceImages | 执行此任务的前提是执行过 gulp img，不然后面修改图片更改了文件名反而不会修改 CSS 的指纹，本任务是用于将 CSS文件内的图片文件名替换为附带了指纹的文件名 |
| css:generateFiles | 生成带指纹的 CSS 文件 |
| css:removeCopy | 删除 gulp css:copy 复制过来的文件 |
| 任务 | 说明 |
|---|---|
| js | 处理需要添加指纹的 js 文件 |
| js:exclude | 不需要添加指纹的文件 |
| js:attachment | 目录内非 js 文件处理，HTML、CSS的压缩复制，图片文件的复制 |
| js:requireJS | 针对 requireJS 的配置文件 config.js 里的路径替换 |
| 任务 | 说明 |
|---|---|
| manifest:merge | 将生成的 rev-img-manifest.json、rev-css-manifest.json、rev-js-manifest.json 合并成 rev-manifest.json |
| manifest:clean | 删除 rev-img-manifest.json、rev-css-manifest.json、rev-js-manifest.json |
| 任务 | 说明 |
|---|---|
| res:css | 复制压缩到目标目录 |
| res:img | 复制到目标目录 |
| res:js | 压缩、混淆之后复制到目标目录 |
| res:exclude | 无需压缩处理的文件复制到目标目录 |
| copy:TestResToMainRes | 将 test/res 下非版本化的所有内容都复制压缩混淆到 main/res 下，由以上的 4 个任务组合成 |
由上面所列出的单任务组合出来的任务流。
| 任务 | 阶段 | 说明 |
|---|---|---|
| dev | 本地自测(53、72) | 在 test 下生成版本化的相关内容以便于在线下调试时使用，不会提交至仓库（在 .ignore 内已经排除了生成的目录、文件的提交），如果后端也需要测试，另行操作 |
| pre | 预发测试(215) | 不会生成版本化内容，只是将 test/res 目录下的内容复制(压缩、混淆)至 main/res 目录下 |
| prod | 灰度测试(160) | 包含了任务 dev、pre，并且复制版本化文件、资源表至 main/res 下，之后执行 end 扫尾工作，清除冗余内容 |
prod 任务包含：
| 任务 | 说明 |
|---|---|
| copy:rev | 将 test/res/@_@ 下的版本化内容复制到 main 下 |
| copy:manifest | 将版本化对应的资源表 test/res/rev-manifest.json、test/res/version/*.json 复制到 main/res 下 |
| copy:TestResToMainRes | 具体查看非版本化文件 |
| end | 扫尾工作，清理 test/res 目录下生成的相关版本化内容 |
预发和灰度环境，需要从 master 新开 release 固定分支，之后再提交预发和灰度的测试，测试回归完毕，需要通过 gitlab 提交 pull request 合并至 master，之后删除 release 分支，下次操作再次执行以上步骤。
| 任务 | 说明 |
|---|---|
| sweep | 用于清理删除冗余过期资源表及其文件，本任务执行周期大概在半个月以上才会去执行(半个月后想起来要清理冗余文件了，就执行下，想不起来就放着)，无需每次在对文件添加指纹时执行 |
过期文件判定说明：
new Date().getTime()生成的时间戳命名的资源表（过期、失效）首先分别获取当前生效的正在使用的资源表以及 verseion 目录下的所有资源表（包括当前生效的正在使用的资源表）。
表的内容都是以键值对（值：字符串）的形式：
{"filename.ext": "filename~hash.ext"}
因为需要进行合并的操作，所以需要将值转换为数组的形式：
{"filename.ext": ["filename~hash.ext"]}
所以第二步是将表的值转换为数组的形式以便于合并，当前生效的资源表可以直接转换，而 version 目录下的资源表需要每个单独转换后合并成一个，合并过程中会做去重处理。
第三步是求差集，version 目录下的所有资源表合并成一个过后跟转换过后的当前生效的资源表比较求出差值，得出的结果即为需要删除的冗余文件。
最后，通过得到的结果集进行删除动作。