谈谈前端npm install速度慢的那些事

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

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

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

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

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

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

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

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/
1
2

当你使用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
1