@Mercedes-Benz 2018-08-25T13:57:55.000000Z 字数 2724 阅读 611

官网前端资源部署优化

性能优化

前置说明

建立前端资源版本化管理缘起前后端发版谁先谁后，发版期间、之后的缓存的失效问题以及希望优化网站提升体验的目的。

本任务思路参照了知乎上的一个问题《大公司里怎样开发和部署前端代码？》，通过张云龙的回答，简单的实现了其中的部分需求，在使用前阅读此回答可以简单的了解到本任务的想法思路。

环境配置

本地已安装 Node 10.x
在其命令行工具内执行 npm install 安装由目录内 package.json 指明的插件
安装完成即可在命令行工具上执行下面列明的相关任务，执行任务前面需要加上运行命令的工具，下面的相关任务都是基于 gulp 的，故执行任务时，需输入 gulp 任务名，如：gulp prod。

术语说明

版本化：即由其文件内容生成的指纹之后带入其文件名的文件
哈希值：哈希值和指纹同指一个意思

文件结构

前端资源管理的文件夹分为两大个 test 和 main：

test (针对后端开发、线下测试时用，内容为前端源码生成后的未经压缩混淆的内容，便于定位问题，主要服务器是53、72，之所以是两台是便于有两个任务同时进行时使用)
- static（web_1，已废弃，线上还有部分老旧页面有用到该资源）
- css（web_2 ，目前处于维护状态以及专题的更新）
- img（web_2，目前处于维护状态以及专题的更新）
- js（web_2，目前处于维护状态以及专题的更新）
- res（web_3）
  - css（未经版本化的内容）
  - img（未经版本化的内容）
  - js（未经版本化的内容）
  - @_@（版本化后的内容存放文件夹）
  - version（过期资源表存放文件夹，通过清理冗余过期文件，该文件夹会被删除，之后执行任务会再生成）
  - rev-mainifest.json（当前正在使用的资源表）
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	用于清理删除冗余过期资源表及其文件，本任务执行周期大概在半个月以上才会去执行(半个月后想起来要清理冗余文件了，就执行下，想不起来就放着)，无需每次在对文件添加指纹时执行

过期文件判定说明：

当前生效的正在使用的资源表，即这些文件是需要保留的
version 目录下生成由new Date().getTime()生成的时间戳命名的资源表（过期、失效）

首先分别获取当前生效的正在使用的资源表以及 verseion 目录下的所有资源表（包括当前生效的正在使用的资源表）。

表的内容都是以键值对（值：字符串）的形式：

{
    "filename.ext": "filename~hash.ext"
}

因为需要进行合并的操作，所以需要将值转换为数组的形式：

{
    "filename.ext": ["filename~hash.ext"]
}

所以第二步是将表的值转换为数组的形式以便于合并，当前生效的资源表可以直接转换，而 version 目录下的资源表需要每个单独转换后合并成一个，合并过程中会做去重处理。

第三步是求差集，version 目录下的所有资源表合并成一个过后跟转换过后的当前生效的资源表比较求出差值，得出的结果即为需要删除的冗余文件。

最后，通过得到的结果集进行删除动作。

注意事项

本任务只针对 web_3 的内容，之前的不参与
如需测试任务，可新开分支进行测试，测完后直接删除该分支即可
针对 min 结尾的部分文件是不会进行版本化的，如果需要，需手动添加，具体过滤了哪些内容可以查看单个任务的详细信息
js 目录内的非 js 文件是不参与版本化添加指纹的