才云前端优化编译记录

才云前端优化编译记录

才云前端优化编译记录

问题:才云编译缓慢,动辄20-30分钟

一.首先我想着先从镜像入手,工欲善其事必先利其器

进入实例终端可以很清楚的看到,运行的镜像中存在大量无关文件,从其中的maven,jdk文件可以判断这是一个前端后端运行环境都配备的镜像.原本镜像环境充足是一个好的表现,但在docker中这意味着冗余,每次编译都会拉取无用文件,浪费时间,更要命的是前端采用两步编译,意味着需要拉取两遍.

由于下载时间长就不再再次下载了,原本使用的镜像本体大概是800M,新制作的node镜像,配备PM2环境大小是191M

使用新镜像后,能明显感觉到编译时间的缩短,global项目由22分钟缩短到16-17分钟,同时自己制作的镜像自己明白是一个干净的镜像,免去了之前突然出现的编译失败,报错是缓存原因,解决麻烦的问题.

二.完成了镜像的制作,等于打好了地基,需要仔细分析编译痛点

1.node_modules缓存

首先我想到的是缓存node_modules,几百兆甚至1个G大小的node_modules每次部署都需要重新下载无疑是极为浪费时间的.

所以我新建了一条npm i工作流,将编译出来的镜像作为基础镜像,直接复制其中的node_modules(PS:实践过压缩后复制,再解压,但可能由于小文件太多,解压时间太长超过10分钟,我就停止了,实际估计还要久),这确实减少了依赖下载的时间,编译时间也降低到了13-14分钟,但这种方法每个项目都需要建立一条工作流,太麻烦,而且每次组件库更新都需要去编译和修改镜像,对于没有权限的我来说还是有点麻烦,所以我只建了一条global的,没有再去建其他项目的

2.合并步骤

我发现明明前端都是node环境为什么不能一步完成呢?两步走就需要把代码从第一个镜像复制到第二个镜像,单单是代码还好,但第一步下载的node_modules十分巨大,加上代码就有1.6个G大小还都是小文件,复制起来肯定很慢.(PS: 如图第二部仅仅是跑起来就需要5分半)如果能在镜像构建这一步完成编译,不就能极大加快速度吗

Dockerfile FROM azreg.800best.com/seatest_base/node-yarn:12.1 RUN mkdir -p /tmp/code WORKDIR /tmp/code ADD . ./ RUN rm package-lock.json && npm install RUN npm run build:iframe:test CMD [ "pm2-runtime", "start", "prod.json"]

步骤合并后的代码,现在一步就能完成

经过这一步,打包时间从16-17分钟降低至9-10分钟(PS:未使用node_modules缓存,感觉有点麻烦),恰好是原本第一步的耗时,说明减少的时间就是复制和构建新镜像的时间

3.编译过程分析

通过编译日志的查看,发现npm i时间消耗占比最大,10分钟的总时间,占了7分钟,同时发现编译时间加镜像制作上传仅仅只有3分钟,说明webpack编译优化空间有限.

查询npm文档发现,如果没有package-lock.json,那么npm需要先扫描依赖构建目录之后才能进行下载包.如果存在package-lock.json,那么会按照其中的目录直接下载,极大加快速度

Dockerfile FROM azreg.800best.com/seatest_base/node-yarn:12.1 RUN mkdir -p /tmp/code WORKDIR /tmp/code ADD . ./ RUN npm install RUN npm run build:iframe:test CMD [ "pm2-runtime", "start", "prod.json"]

去除了删除package-lock.json的代码,

再次打包发现

这个报错在项目中很常见,之前查询发现需要删除package-lock.json,这不矛盾了吗?

后来网上一句话点醒了我:目标版本依赖已经因为时间久远不存在

我想应该是项目中的package-lock.json太久不更新,需要更新一下

删除node_modules和package-lock.json删除后重新npm i 后将新的package-lock.json上传

再次编译,成功

如图npm i下载时间缩短至2分半,同时同时总体时间也降低至5-6分钟.(这下载时间比缓存node_modules时间更短)

4.docker缓存

docker是一步一步缓存的,如果每一步的文件都没有变动那就会进行缓存,先将package文件先复制进来下载依赖,如果package文件没有变动,那就会直接拿docker缓存,不需要进行依赖下载.

如果成功,将能够省掉依赖下载时间,但可惜才云好像并没有开启缓存

三.总结

1.使用新制作的纯净镜像

2.将流水线改成一步

3.使用package_lock.json