优化jenkins中vue项目的打包速度（vue打包后js加载太慢了）

以前前端项目没有编译这一说法，写完就能用，顶多再压缩下，非常方便。 现在前端项目多是vue、reactjs框架基于nodejs开发，都需要先编译再压缩打包。在jenkins设置前端项目发布任务时经常会遇到项目编译时间过长的问题，短则3，5分钟，长的有超过18分钟的。经过一段时间的摸索终于有所改善，在此分享给大家。

首先，我们要明白编译过程是怎样的，nodejs项目编译打包就两个命令：

npm install  #安装依赖库
npm run build #编译打包

主要耗费的时间就是在npm install 这一步，执行npm install命令时，node会从package.json文件中读取所有依赖信息，然后根据依赖信息与node_modules中的模块进行对比，没有的会到远程仓库下载, 因为官方仓库地址是老外的，所以依赖包的下载非常耗时。解决这个问题一是需要设置一个国内的镜像地址,命令如下：

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

或者使用淘宝的cnpm替换npm命令。然而，不知道是镜像不即时还是什么问题，设置淘宝镜像后有些项目打包会莫名失败，且我在jenkins上配置的项目编译速度仍然较慢。 二是本地缓存依赖包，然而这在jenkins中是不行的， 因为每次构建jenkins会先清理掉工作空间的内容，node_modules也会被清掉。

jenkins上配置基于nodejs的前端项目可以作为一种自由项目(freestyle project),只需在Build Steps增加一个Execute shell，把上面的打包命令输上去即可,当然jenkins所在主机必须安装nodejs。另外可以结合nodejs插件,安装nodejs插件后，在系统管理->工具里可以配置多个版本的node,在项目配置->构建环境会多一个选项

如上图，通过插件可以配置不同的node版本，node配置文件，这里重点关注Cache Location选项

默认是将依赖包缓存到~/npm (Linux系统) 或 %APP_DATA/npm-cache，这是个全局目录。

第二个选项‘Local to the executor’，缓存目录被指定到jenkins工作目录
/var/lib/jenkins/npm-cache下，且每个执行器单独一个子目录

第三个选项‘Local to the workspace’，放项目目录下，所以这个不能选。

我们选择第二项，我在二次打包时速度有所改善，但仍然很慢。观察执行日志,发现下面这段执行比较耗时

npm WARN old lockfile
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile

这涉及到一个package-lock.json的配置文件，这个文件大概作用是记录上次具体的依赖包版本号，锁定版本。 检查发现服务器上的npm和开发电脑上版本一致，开发也不能提供有意义的帮助，于是果断在打包命令前加了删除命令rm -f package-lock.json， 速度立马提升到10秒级。

再后来，发现有个命令叫npm-cache（需要单独安装），可以实现依赖包的缓存安装。