谈谈前端jenkins构建-npm install速度慢的那些事

前言

之前项目上遇到了苦逼的事情，一旦项目准备发布，jenkins整个工作流程下来要十几分钟，甚至能导致半个小时左右，我们作为前端能考虑的就是不断想办法提高依赖的拉取速度和项目的构建速度。

一、我们的发布速度为什么那么慢？

1.npm镜像源的问题
首先前端目前大多数都是基于node服务的单页面应用，其本身借运行与打包构建都是借助了一些npm市场上的插件或组件。然而在npm install拉取远程包的过程中，由于外网的访问速度被限制还有的链接指向的是github，所以导致我们的安装速度大打折扣，甚至是安装失败。

2. 项目的依赖是否仅仅只有package.json中的十几或几十个包？
有时候我们的项目往往看上去只引用了十几个依赖，但是潜在的可能一个依赖里面又引入了上百个工具包，在拉取项目时，十几的包会有成千上百。你可以尝试打开你的node_modules仔细观察一下就知道了。

3.代码问题或者配置问题导致打包速度
项目本身无非是两块，一个是install的拉取速度，一个就是项目本身打包的效率了，有一些代码和打包插件也会影响到项目构建速度。

4.服务器配置问题
往往影响发布问题的不仅仅只是前端代码，比如本地安装和打包速度都达到了极致，但是jenkins就是慢，这是因为发布服务器的配置过低，I/O读写能力较差，因为出了网速下载问题就是服务器本身对文件的读写能力，安装-打包-输出，如果配置过低，显然也是不行的，这时候就需要我们的运维上场解决一下了。

二、前端角度如何优化这个问题？

1. 切换镜像，提高构建速度
大多数人会把npm切换至淘宝镜像(即下方命令)，这样一来每次使用npm install安装的时候，就会指向国内的镜像源，从而提高安装速度。嗯，确实是个不错的办法， 但是仍然不是最佳方案，接着看…

npm config set registry https://registry.npm.taobao.org
 

除了直接去切换npm镜像源指向淘宝镜像源，还有一个做法，那就是cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
 

npm与cnpm整体区别还是很大的，别看小小的一个安装指令多了一个c，cnpm支持gzip 压缩，所以你会发现无论你怎么改变镜像源，其安装速度永远追赶不上cnpm。通常情况下， 没有什么安装工具能与cnpm ban一下手腕。

但是问题来了，cnpm里面的软链接和zip快是快，偶尔也会出现一些丢包的现象，但是这种情况不多，大多数还是比较好用的，但是有一些包的特殊版本就是有一些问题，所以也不能完全使用它。

接着就介绍下一种-----yarn
它是Facebook最近发布的一款依赖包安装工具，用于替代npm的解决方案，感兴趣的可以去安装一下，也是我比较推荐的一种方式。它的工作方式会在根目录生成一个yarn.lock的锁定文件，下次再次安装时速度是飞快的，第一次还是很慢的。

2. 结合yarn搭建内网镜像进行优化
让运维在内网服务器部署一套 verdaccio（不懂得我们会在下一篇文章中做解释），它的其中一个核心作用就是缓存我们从npm拉取的所有资源包到你所部署的服务器

npm set registry http://10.100.20.11:4873/
 yarn config set registry http://10.100.20.11:4873/
 

当你使用yarn进行安装时就会全部从你的本地服务器镜像进行拉取并解压，极大的缩短时间

在安装时会发现只用了14s
上边是我们本地的安装时间，大家注意这里的yarn.lock千万不要删除，第一次生成大概需要一百多秒，如果你进行了删除，下次安装或者构建服务器在进行安装时都会非常的费劲。我们的服务器是4核8G的。时间大概在35s，是我本地的3倍，不过也还好，毕竟你们本地安装会在多久呢？？

这里需要再额外强调一下，如果你的项目中使用了sass，恰好也引用了node-sass这个插件包，那么需要全局配置一下，因为它始终是去github进行拉取的，如果你的项目一直卡在node-sass的包上，你应该额外注意。

yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass