在生产环境中使你的 npm i 速度提升 50%

更新日期: 2019-12-03阅读: 2.1k标签: npm

对于一个前端应用,或者说是一个 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,比如 reactvue 和 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,既提升速度又保障应用安全性

原文:https://blog.csdn.net/u011518749/article/details/104629597/

链接: https://www.fly63.com/article/detial/8084

在5分钟内搭建企业内部私有npm仓库

下面通过三种方法来搭建公司私有npm仓库,每种方式都有自己的优势。启动并配置服务、设置注册地址、登录cnpm、包上传到私有仓库、查看预览包、通过verdaccio搭建....

使用webpack开发npm插件

webpack:解析js文件,无法解析的文件需要借助loader,npm插件发布(vue&webpack&单页面):npm init =>package.json,创建.vue文件 =>插件界面及功能,index.js =>入口文件

npm命令大全_整理NPM常用命令

NPM是随同NodeJS一起安装的包管理和分发工具,它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包。这篇文章整理NPM常用的一些命令

npm 执行多个命令_如何用npm同时执行多条监听命令

直接通过&&连接多条命令,在npm run start的时候,发现只停留在第一个命令执行监听,后面的命令都没有执行。只能通过打开多个窗口分别执行多条命令,那么有没有办法实现一条npm命令执行多条监听呢?

npm和bower的关系和区别

npm和bower太像了,就像一对孪生兄弟…… npm的文件是package.json,包安装的目录是node_modules。 bower的文件是bower.json,包安装的目录是bower_components。使用命令也基本一致

npm run build根据不同参数打包不同环境url

这篇文章主要介绍了vue项目中Npm run build 根据环境传递参数方法来打包不同域名,使用npm run build --xxx,根据传递参数xxx来判定不同的环境,给出不同的域名配置,具体内容详情大家参考下:config文件夹下dev.env.js中修改代码、prod.env.js中修改代码 HOST为截取到的参数

npm安装模块时报错:no such file or directory

使用node.js和npm,在安装模块的时候报错npm WARN saveError ENOENT: no such file or directory, open ...的解决办法。这个原因就是因为项目没有进行初始化,缺少package.json文件造成的。需要package.json才能npm install。 可以npm init初始化生成一个package.json。

vue-cli 3.x 开发插件并发布到 npm

抽空写了一个 textarea,打算发布到 npm 的时候却遇到了问题,之前用 vue-cli 2.x 的时候,打包配置项非常透明,可以很容易的修改,但升级到 vue-cli 3.x 之后,反而一脸懵逼

前端npm 安装包,精选大全集合

如果您曾在 Node 或 JavaScript 前端开发中投入过时间和精力,那么您就知道 npm 中有数以十万计的模块可供您选择。挑选模块可能很难,但您只需要一些方法点来解决它。当您正在为如何抉择浪费时间,或者甚至不知道从哪里开始时,请使用本指南来帮助您。

关于 npm run eject 报错的问题

关于 npm run eject 报错的问题,昨天新开React的项目, 刚刚一上手就碰到问题,解决方法(前提你有git).出错的原因:应该是git没有安装好,或者代码没有提交上git

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!