加 3 行代码减少 80% 构建时间

最新推荐文章于 2024-03-14 07:51:15 发布

傲娇的koala

最新推荐文章于 2024-03-14 07:51:15 发布

阅读量136

点赞数

文章标签： docker 容器运维

原文链接：https://mp.weixin.qq.com/s?__biz=MzUxNzk1MjQ0Ng==&mid=2247512432&idx=1&sn=777f6966b613703b65e4df71c0248ae3&chksm=f992b7a1cee53eb71dc3f86bfaffeb9387cee5aa088b082de7676f93f7ee27c7e2140983c663&scene=126&sessionid=0

版权

大厂技术高级前端 Node进阶

点击上方程序员成长指北，关注公众号

回复1，加入高级Node交流群

作者：Whilconn

原文：https://juejin.cn/post/7135756687134162980

1. 背景

最近接手的BI项目在Jenkins的构建机上构建耗时比较久，日常构建耗时都在 20min 以上，即使改动一行代码也要构建这么久。构建耗时截图如下：

构建耗时较长导致日常测试和正式发版都会浪费很多时间等待，对研发流程影响较大（主要是我忍不了）。因此需要对构建速度进行优化。

2. 优化思路分析

要优化项目的构建速度，得先了解构建流程：

开发人员推送代码到 Gitlab，触发 Gitlab 服务器的 Push Events
Push Events被触发后，会调用提前配置好的 Jenkins webhooks
Jenkins webhooks被调用后，会执行对应项目的构建任务
构建任务开始后先拉取项目源码到构建机，再使用docker build构建镜像
docker 构建镜像分为两个阶段，先使用npm scripts构建前端项目，然后把构建产物拷贝到nginx基础镜像

在这个流程中，可以优化的环节只有构建docker镜像这一步，其他环节的耗时基本可以忽略不计。而在不大改项目的情况下能起到明显提速效果的方案是：缓存策略。构建docker镜像时可以用到的缓存包括两类：docker层缓存和应用层缓存。

docker层缓存是指docker build所产生的可重用镜像层，只要Dockerfile中的命令及相关的源文件未改变，就能直接使用这些镜像缓存。这种缓存策略在代码不改变的情况下效果很好，构建耗时甚至可以控制在 10 秒内。而对于日常开发情况下，代码频繁变化，如果应用本身构建时间又很长，则需要使用应用层缓存。（上一篇文章《docker build 缓存失效分析》中有 docker 层缓存相关介绍，也可以看看官方文档^[1]、中文文档^[2]，本文不再赘述）

应用层缓存是指应用构建所产生的中间产物，这些中间产物主要是node_modules目录中的物理文件，其中包括npm install下载的依赖包和npm run build产生的.cache目录文件。而docker build每次都会初始化全新的环境用于构建，新环境中不存在node_modules目录，因此每次都是重新写入而无法复用，得想办法复用该目录下的文件；另外npm run build需要开启缓存功能，才会输出缓存文件到node_modules/.cache目录。

综上，优化思路主要是两点：1、开启应用层构建缓存（如webpack cache）；2、持久化node_modules目录，确保每次npm install和npm run build都能复用该目录下的文件。

3. 开启应用层构建缓存

项目使用的技术是React，构建主要依靠react-scripts@4.0.3，底层实际调用的是webpack@4.44.2，应用构建缓存主要来自webpack。webpack需要手工开启缓存功能（官方文档传送门^[3]），配置cache属性为true即可。

实际操作只有 1 步， 找到webpack.config.js设置cache:true，代码如下：

module.exports = {
  //...
  cache: true
};

本地首次npm run build构建，无缓存的情况下，耗时 13min 左右。

启用缓存后在本地进行二次构建，有缓存的情况下，无论是否修改源码构建耗时均为 4min 左右，比优化前的 13min 有明显提升。 构建耗时截图如下：

实际上，webpack@4的缓存只在watch和development模式下生效，在上述构建测试中其实不起作用。 实测删除wepack中的cache:true配置，或者配置为cache:false，二次构建时间也是 4min 左右。

之所以构建速度提升了那么多，是因为react-scripts的webpack配置^[4]中开启了babel-loader和eslint-webpack-plugin的缓存功能，另外terser-webpack-plugin配置^[5]也默认开启了缓存功能。从缓存目录node_modules/.cache中也能看到它们的缓存文件。

所以，这一步其实啥也不用做，如果想进一步提速可以升级到webpack@5。

4. 持久化`node_modules`目录

想在docker build环境中持久化node_modules需要使用到BuildKit的mount功能，该功能有几个前置条件：

docker 版本必须高于 18.09
BuildKit需要手工启用^[6]，可在docker build命令前添加环境变量DOCKER_BUILDKIT=1启用
如果前两个条件不满足，则需要具备Jenkins和构建机的读写权限，以调整构建环境参数
修改Dockerfile，使用RUN --mount=type=cache运行npm install和npm run build指令（--mount=type=cache说明文档传送门^[7]）

开启BuildKit还有其他特性^[8]，比如输出日志更友好，基本每一步都会输出耗时，就这一条，值了！

实际操作分为 2 步：1、修改Jenkins配置，在docker build命令前加上环境变量。修改后镜像构建命令长这样：

DOCKER_BUILDKIT=1 docker build .

2、修改Dockerfile，将RUN npm install和RUN npm run build指令改为RUN --mount=type=cache npm xxx。修改后Dockerfile长这样：

FROM node:alpine as builder

WORKDIR /app

COPY package.json /app/

RUN --mount=type=cache,target=/app/node_modules,id=my_app_npm_module,sharing=locked \
    --mount=type=cache,target=/root/.npm,id=npm_cache \
    npm i --registry=https://registry.npm.taobao.org

COPY src /app/src

RUN --mount=type=cache,target=/app/node_modules,id=my_app_npm_module,sharing=locked \
    npm run build

文档说由于 BuildKit 为实验特性，需要在 Dockerfile 文件开头加上如下代码：# syntax = docker/dockerfile:experimental。在Docker 20.10环境下，加了上述代码反而构建报错，原因是加载外网资源失败，删除后构建成功。这不就是玄学吗？🤡

5. 优化结果

在配置好缓存策略后，模拟日常开发修改项目代码触发自动构建流程，构建耗时从 20min+下降到 4min+，总体耗时减少 80%。整个优化过程修改了Jenkins的一行配置，另外在Dockerfile中添加了3行代码，改动很少但效果很不错。

分

参考资料

[1]

https://docs.docker.com/develop/develop-images/dockerfile_best-practices/#leverage-build-cache: https://link.juejin.cn?target=https%3A%2F%2Fdocs.docker.com%2Fdevelop%2Fdevelop-images%2Fdockerfile_best-practices%2F%23leverage-build-cache

[2]

https://vuepress.mirror.docker-practice.com/appendix/best_practices/#%E6%9E%84%E5%BB%BA%E7%BC%93%E5%AD%98: https://link.juejin.cn?target=https%3A%2F%2Fvuepress.mirror.docker-practice.com%2Fappendix%2Fbest_practices%2F%23%25E6%259E%2584%25E5%25BB%25BA%25E7%25BC%2593%25E5%25AD%2598

[3]

https://v4.webpack.js.org/configuration/other-options/#cache: https://link.juejin.cn?target=https%3A%2F%2Fv4.webpack.js.org%2Fconfiguration%2Fother-options%2F%23cache

[4]

https://github.com/facebook/create-react-app/blob/v4.0.3/packages/react-scripts/config/webpack.config.js#L459: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Ffacebook%2Fcreate-react-app%2Fblob%2Fv4.0.3%2Fpackages%2Freact-scripts%2Fconfig%2Fwebpack.config.js%23L459

[5]

https://github.com/webpack-contrib/terser-webpack-plugin/tree/v4.2.3#cache: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fwebpack-contrib%2Fterser-webpack-plugin%2Ftree%2Fv4.2.3%23cache

[6]

https://docs.docker.com/develop/develop-images/build_enhancements/#to-enable-buildkit-builds: https://link.juejin.cn?target=https%3A%2F%2Fdocs.docker.com%2Fdevelop%2Fdevelop-images%2Fbuild_enhancements%2F%23to-enable-buildkit-builds

[7]

https://vuepress.mirror.docker-practice.com/buildx/buildkit/#run-mount-type-cache: https://link.juejin.cn?target=https%3A%2F%2Fvuepress.mirror.docker-practice.com%2Fbuildx%2Fbuildkit%2F%23run-mount-type-cache

[8]

https://docs.docker.com/develop/develop-images/build_enhancements/#new-docker-build-command-line-build-output: https://link.juejin.cn?target=https%3A%2F%2Fdocs.docker.com%2Fdevelop%2Fdevelop-images%2Fbuild_enhancements%2F%23new-docker-build-command-line-build-output

Node 社群

我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加考拉好友回复「Node」即可。

“分享、点赞、在看” 支持一波👍

傲娇的koala

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
加 3 行代码减少 80% 构建时间

大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群作者：Whilconn原文：https://juejin.cn/post/71357566871341629801. 背景最近接手的BI项目在Jenkins的构建机上构建耗时比较久，日常构建耗时都在 20min 以上，即使改动一行代码也要构建这么久。构建耗时截图如下：构建耗时较长导致日常测试和正式...
复制链接

扫一扫