前端高级进阶：在生产环境中使你的 npm i 速度提高 50%

这是山月关于高级前端进阶暨前端工程系列文章的第 M 篇文章 (M 随便打的，毕竟也不知道能写多少篇)，关于前 M-1 篇文章，能够从个人 github repo shfshanyue/blog 中找到，若是点进去的话能够捎带~点个赞~，若是没有点进去的话，那就给这篇文章点个赞。

本篇文章地址在 前端工程化系列，欢迎订阅。

1. 前端高级进阶：javascript 代码是如何被压缩
2. 前端高级进阶：如何更好地优化打包资源
3. 前端高级进阶：网站的缓存控制策略最佳实践及注意事项
4. 前端高级进阶：在生产环境中使你的 npm i 速度提高 50%

---

对于一个前端应用，或者说是一个 Node 应用，在 CICD pipeline 中，不管是构建，测试，部署，其中必不可少的环节就是依赖安装: npm i。

npm i 不只是必不可少的环节，并且极可能也是耗时最长的一个环节。

打蛇打七寸，优化应该从瓶颈处开始，若是能从依赖安装下手，将能极大地缩短部署时间，提升产品交付效率，改善 DevOps 流程，从而促进敏捷开发。

CI 环境中的优化不一样于本地开发环境，其中最大的不一样在于: 在本地环境中安装依赖是有状态的，如 node_modules，~/.npmrc，~/.npm 一系列硬盘目录及文件，无不构成状态。而在生产环境中，每每结合 CICD 工具，每次分配的 Runner 不必定是一台服务器(容器)，每每被视为无状态，于是没法有效利用缓存而致使 CI 中部署用时过长。

但也正由于 CICD Runner 的无状态化，这意味着你只要参考构建脚本，如 .gitlab-ci.yaml，.travis.yaml 或者 .github/workflows/deploy.yaml，就能够从零把项目跑起来，而避免过多在熟悉新项目时求助他人。

不一样的部署方式，不一样的持续集成工具备不一样的实践方法，但优化的原理大同小异。

<!--more-->

若是嫌文章太长，直接直接拉到最下方看总结

只安装有必要的库

npm install 的速度显然与它依赖的包的多少是正相关的，那减小包的数量就能够减小装包所花费的时间。这个道题如同天天都少吃一顿饭就会变瘦同样简单。

使用 --production 能够只安装 package.json 中 dependencies 中的依赖项，只把要安装在 CI 中须要使用到的依赖。在生产环境部署时能够指定 --production。

npm install --production

另外，经过设置环境变量 NODE_ENV=production 至关于指定 --production，测试以下:

$ NODE_ENV=production npm config get production
true

这惟一的不足就是须要你谨小慎微战战兢兢，如临深渊如履薄冰地把 packages 分拣到 devDependencies 与 dependencies 中。

使用私有镜像仓库

从 npm 的官方仓库能够发布与拉取 package，好比 react，vue 和 express 都发布在官方仓库中。官方 registory 地址是 https://registry.npmjs.org/，这对国内的前端应用来讲，因为远在国外，远程仓库的服务器时延过大，此时的瓶颈在于网络。

国内的公有镜像库是一个不错的选择，如淘宝镜像，它每隔十分钟与官方镜像仓库同步一次，而它位于国内，网络不至于太慢。

对于企业级项目的生产环境来讲，在集群内部搭建私有仓库是一个更好的选择，也更能缩短时延。 流量能在局域网完成的，就不须要去互联网中溜圈了。

使用 npm config 来设置 npm 仓库，它将把仓库信息写入 ~/.npmrc 中，这足以适用于 CICD 中。

npm config set registry https://registry-npm.shanyue.tech/

缓存：人不能两次踏进同一条河流

人不能踏进同一条河流两次，一个接口不能连续慢两次，npm install 一样不能慢两次。

正如 http cache 同样，npm install 也能够充分利用缓存，npm 的缓存在 linux 系统中存在于如下路径:

• ~/.npm

命令 npm cache verify 能够校验缓存，以下所示:

$ npm cache verify
Cache verified and compressed (~/.npm/_cacache):
Content verified: 4415 (156612117 bytes)
Index entries: 6239
Finished in 14.017s

结合 npm install --prefer-offline 缓存优先策略充分利用缓存

可是有一个悖论，在 CI 中是无状态的: 你本次装的 node_modules 和生成的 ~/.npm 将会在下次装包时丢失。

这时候就须要利用 CI 的缓存功能，如如下是 travis ci 的配置

install:
- npm ci
# keep the npm cache around to speed up installs
cache:
  directories:
  - "$HOME/.npm"

progress: 屏蔽非必要打印信息

当设置 progress 为 true 时，npm install 时将会显示进度条，把它设置为 false 可小幅提升 npm install 的速度。

修改设置:

npm set progress=false

在 官方文档 中对 progress 有如下介绍：

Default: true, unless TRAVIS or CI env vars set.
Type: Boolean

所以，只须要在构建服务器中简单设置一个 CI=true 的环境变量便可以很轻便地解决问题

使用 npm ci 替代 npm i

单看名字，里边有个 CI，它就像适用在 CI 中，事实也如此。它在 CI 环境中作了一系列优化，如去除掉一些面向用户的特性来增强速度。除了性能，它也有一些在 CI 上基于完整性与安全性的检查，如 package.json 与 package-lock.json 版本不一致的问题。

为了更好地提升速度，npm ci 基于一个独立的库 libcipm 安装依赖，而它拥有和 npm install 兼容的 API。而且当它安装依赖时，默认是缓存优先的，它会充分利用缓存，从而加速装包。

经实验，npm ci 能够减小将近一半的的依赖安装时间。

$ npm install
added 1154 packages in 60s

$ npm ci
added 1154 packages in 35s

总结

最后总结一下如何减小 npm install 的时间，都是很简单的设置，一分钟搞定

1. 选择时延低的 registry，须要企业技术基础建设支持
2. NODE_ENV=production，只安装生产环境必要的包
3. CI=true，npm 会在此环境变量下自动优化
4. 结合 CI 的缓存功能，充分利用 npm cache
5. 使用 npm ci 代替 npm i，既提高速度又保障应用安全性

与我交流

扫码添加个人机器人微信，将会自动（自动拉人程序正在研发中）把你拉入前端高级进阶学习群

---

大厂招聘

推荐一个关于大厂招聘的公众号【互联网大厂招聘】，做者将在公众号里持续推送各个大厂的招聘职位及要求，并与大厂面试官以及招聘负责人直通，感兴趣的能够直接与负责人交流。

另外，做者也将持续推送优质的大厂面试经验，各类大厂独家面试题以及优秀文章分享，不限于前端，后端，运维和系统设计。

我在 github 上新建了一个仓库 每日一题，天天一道面试题，欢迎交流。

• 前端面试题小记
• 计算机基础面试题小计