背景
以 Jenkins 服务器为例,在构建内部的这个项目时,CE 每部署一次服务,最快 6 分钟,最
慢将近 13 分钟左右。遇到多个项目并发打包会因为资源占用等问题时间会延长,甚至出现过
几次 20 分钟以上的情况。

所以经常收到一些友情提示:比如像这样的截图,往往对方只发一张图,却什么都不说:

原因
在了解原因之前,我们先回顾一下历史,也就是当年为什么要用 Yarn。从这段历史中,我们
可以分析出来慢的原因。

Yarn 工具没有推出之前,通常是使用 NPM 进行依赖管理的,早期的 NPM 它有一个致命的
缺陷;需要等一个包,完全安装好后,在对下一个包做处理;它没有并发能力,所以才不会
涉及到高 IO 的问题,牺牲的是等待时间。

NPM 遇到相同版本的依赖库时,会重新下载一遍这个包;因为它原生不具备缓存能力,所以
只能重新下载。这也不会涉及 IO 问题,因为它牺牲了下载时间和 node_modules 文件夹的体
积(这里是提前引用概念,下面第四条中有介绍)。

所以当时,我们引用了 Yarn 工具来提升安装依赖的速度。

(1) 它最特殊的是,具备锁(lock)文件,你从哪下载文件,你团队的人就从哪下载文件,避
免包版本不一致的问题。能解决我线下好使啊,怎么到你那就不行,诸如此类的问题。

(2) 会缓存它下载的每个包,所以无需重复下载。

(3) 具备离线模式,之前安装过的包会被写入缓存目录,以后安装就直接从缓存中复制过来,
这样做的本质是减少重复下载,减少不必要的网络请求。

(4) 为了减少 node_modules 体积,会对依赖次数做选举,把引用频率高的类库放到顶级目录。

我们已经了解,它是依赖文件缓存的方式,提升了效率问题;仅仅是做选举,就已经引发了
高频 IO 的操作,因为它要分析引用次数来回的移动目录。Webpack 打包构建情况也是类似,
具体就不在展开细说。

现象
所以我们有了一个印象,前端工程下载后,会做很多 IO 操作。这对 SSD 磁盘很有效。如果
是机械硬盘,遇到高频读写,性能就会很慢。这是 Yarn 在做依赖库选举而优化磁盘占用时,
机械硬盘所消耗的时间耗时 13 分钟:

这种情况我们很难避免,只有几种选择:
1. 后退,使用 NPM 工具,选择等待牺牲网络下载时间,这条路走不通。
2. Jenkins 更换 SSD 磁盘,更换硬件实际上是最好的方案,短期内也走不通。
3. 优化 Yarn 依赖库的选举方案,Yarn PnP 还不太成熟,我们还在调研中,有坑,也走不通。

解决方案
当时的情况是,正常的方案都无法走通了。直到有一天我的同事提供一个思路,说他当年在 Windows
下片时,为了加快 Copy 速度把内存当磁盘用了,Windows 设置这个东西很简单。你们看看
Linux 支不支持。随后我们就开始调研,本机测试后发现可行。

然后我们以线下的的环境做试点,部署脚本改好了测试近一周,发现可行。

优化前,最高 23 分钟(开篇第一张图),现在平均 3 分钟

另一个项目优化前,平均 8 分钟:

优化后,平均 49 秒

本次主要是给大家,提供一个解决 IO 问题的思路。我们使用的是 RAM disk 中的 temfs
方案。技术对比看下方链接的文章就行,很简单:

参考链接
https://baike.baidu.com/item/tmpfs/1476960?fr=aladdin
https://blog.csdn.net/wz947324/article/details/80007122

借助 RAM disk 技术,加快前端工程打包速度的更多相关文章

  1. 如何将 iOS 工程打包速度提升十倍以上

    如何将 iOS 工程打包速度提升十倍以上   过慢的编译速度有非常明显的副作用.一方面,程序员在等待打包的过程中可能会分心,比如刷刷朋友圈,看条新闻等等.这种认知上下文的切换会带来很多隐形的时间浪费. ...

  2. 加快QT工程编译速度

    转载:学海方舟 利用Qt Creator编译工程大家都觉得慢,特别是整个工程重新编译时,那问题来了怎么加快编译速度呢 ,其实方法很简单,利用我们的强大的多核CPU来实现多核编译: 在编译参数中加入“- ...

  3. 加快QT工程编译速度(还可给Qt for Android设置)

    一.多核编译 环境:win10, Qt 5.4.1,编译器mingw32 项目: Qt for Android Qt Creator 在编译android项目时不支持预编译,默认cpu单核编译,工程稍 ...

  4. 前端工程优化:javascript的优化小结

     我觉得优化javascript是一门高深的学问,在这里也只能站在前人的肩膀上,说一些我浅显的认识,更希望的是抛钻引玉,如有不对,敬请斧正. 首先,要认识到是,优化js的关键之处在于,优化它的运行速度 ...

  5. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  6. 仿B站项目——(1)计划,前端工程

    计划 现打算: 计划用webpack打包 + 模板语言 + jquery + jquery ui + bootstrap做一个仿B站的静态网站. 网站兼容手机浏览器端. 部分模块打算仿照SPA用js加 ...

  7. 前端工程精粹(一):静态资源版本更新与缓存(附精简js的工具)

    转自:http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1/ 每个参与过开 ...

  8. H5新人福音~零配置搭建现代化的前端工程

    X-BUILD一套基于Webpack(v4.21.0)快速搭建H5场景开发环境的脚手架,只需要几分钟的时间就可以运行起来.X-BUILD是针对H5开发的一套自动化构建工具,致力于提升开发效率,减小开发 ...

  9. 前端工程模块化——以一个php项目为例

    实现一个页面功能总是需要 JavaScript.CSS 和 Template 三种语言相互组织,所以我们真正需要的是一种可以将 JavaScript.CSS 和 Template 同时都考虑进去的模块 ...

随机推荐

  1. 【Arduino】37种传感器系列实验(4)---振动传感器模块

    ---恢复内容开始--- 37款传感器的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器,依照实践(动手试试)出真知的理念,以学习和交流为 ...

  2. 【Docker】unauthorized: incorrect username or password

    昨天朋友推荐玩玩 Docker.虽然之前就听过,但一直不清楚干嘛的,也没去搞过,虽然前段时间就装了,但一直没打开.这两天刚开始熟悉,就遇到了点小问题.一番 Google 之后解决了,记录一下. CLI ...

  3. 【Android】Fresco 初次使用遇到的坑

    初次使用开源框架 Fresco,结果遇到了坑,被虐了半下午--暂且记下. 下面的错误 android.view.InflateException: Binary XML file line #** 报 ...

  4. Android Studio 'AIDL is missing' 且 不识别R文件

    最近刚开始用Android Studio,出的问题还真不少.昨天不知为何不能新建项目了,这两天重装了几次才搞定. 可又出了这个问题: 原因:Compile Sdk Version和Build Tool ...

  5. HashMap常见面试题整理

    花了三天时间来仔细阅读hashMap的源码,期间补了下不少数据结构的知识,刷了不少相关的面试题并进行了整理 1.谈一下HashMap的特性? 1.HashMap存储键值对实现快速存取,允许为null. ...

  6. SQL Labs刷题补坑记录(less1-less30)

    补坑加1,这几天快速刷一下sqllabs 来巩固下sql注入基础吧,也算是把很久以前没刷的过一遍,do it! 第一部分: LESS1: 直接报错,有回显的注入, http://localhost/s ...

  7. win7-BIOS中开启AHCI模式电脑蓝屏怎么办?

    win7-BIOS中开启AHCI模式电脑蓝屏怎么办? 来源:U大师 u盘装系统 不少网友都表示给电脑安装win7系统后,如果在BIOS中开启IDE模式就一切正常而为AHCI模式时就会出现蓝屏.其实那是 ...

  8. 什么时候使用redis?什么时候使用memcache?

    要清楚为什么,redis具有高可用特性,并且可固化,但特性有时候不能成为选择他的理由,一些业务场景中并不需要这样的特性.   什么时候倾向于选择redis? 1.复杂数据结构 value是哈希,列表, ...

  9. 谈谈你对java平台的理解?

    问题:谈谈你对java平台的理解?java是解释执行,这句话对吗? 典型回答:java本身是一种面向对象的语言,具有很好的跨平台的能力,能够做到“write once ,run anywhere”.另 ...

  10. OCP培训 Oracle 12c/18c/19c OCP认证实战培训【送OCP优惠名额】

    一.OCP培训 Oracle 12c/18c/19c OCP认证全套实战培训[送OCP优惠名额],本课程内容 课程目标: 为满足想参加Oracle OCP考证的学员,风哥设计的一套比较全面OCP实战培 ...