Detailed explanation of NPM installation and caching mechanism

npm The installation mechanism of

Next, we will learn specifically through a flow chart npm install The installation mechanism of

npm install After performing , First, we will check and obtain npm Configuration of , The priority here is :
Project level .npmrc file > User level .npmrc file > At the global level .npmrc > npm Built in .npmrc file
Then check whether there is package-lock.json file

If there is , Check package-lock.json and package.json Whether the declared dependencies are consistent ：

Agreement , Use it directly package-lock.json Information in , Load dependencies from the network or cache
atypism , Process according to different versions in the above process

without , Then according to package.json Recursively build dependency trees , Then the complete dependent resources will be downloaded according to the built dependencies , When downloading , It will check whether there is relevant resource cache :

There is , Extract directly to node_modules In file
non-existent , from npm Download package from remote warehouse , Check the integrity of the package , Add to the cache at the same time , Unzip to node_modules in

Last , Generate package-lock.json file
Actually , In our actual project development , Use npm As a team's best practice : The same project team , It should be maintained npm Version consistency .
From the above installation process , I wonder if you have noticed anything , In actual project development , If you install corresponding dependencies every time , If the related dependent packets are too large or depend on the network , It will undoubtedly increase the time cost of installation ; that , Caching here is a good way to solve the problem , We will make a specific introduction later .

npm Cache mechanism

Next, let's look at npm How to localize and cache dependent packages of the same version
This is a npm View locally cached commands :
npm config get cache
As we can see from the picture npm The location of the configuration cache is /Users/zhaoxxxx/.npm（mac os The default cache location ） among .

In fact, you can see _cacache The directory of has three files :

content-v2
index-v5
tmp

among , content-v2 There are some binary files stored inside . In order to make binary files readable , I compressed and decompressed the file .

Then decompress the following files to get what we want npm Specific resources :

Decompress results

Here's a recommended one the unarchiver Decompress tool , Support more formats , Strongly recommend .
And in the index-v5 In the document , We can get some descriptive files by using the same operation as just now .
In fact, these contents are content-v2 Index of documents .
So here I also have a question about how the cache here is stored and used ？
I want to mention npm install The installation mechanism of , When npm When it comes to execution , adopt pacote Unzip the corresponding package to the corresponding node_modules below .( Here's a slip of the tongue pacote Those who are interested can study the details together , I can't understand it at present ; The general idea is to write the local cache and generate the corresponding compressed file in combination with the network request and file read-write configuration , Here I can learn something from a big man's article link )
npm There are three main places to use pacote:

When you execute npm install xxx ( It will pass pacote.extract Unzip the corresponding package to the corresponding node_modules below , pacote Source code address : extract.js)

When you execute npm cache add xxx ( It will pass pacote.tarball Under the tarballStream As we saw before _cacache Add cache under file , pacote Source code address : tarballStream）

When you execute npm pack xxx adopt pacote.tarball Under the _toFile Generate the corresponding compressed file in the current path , Source code address :_toFile )

When npm When downloading dependencies , Download to the cache first , Then decompress it to our project node_modules in .
Actually pacote It's dependence npm-registry-fetch To download the package , npm-registry-fetch Can be set by cache Field for related caching .
And then , Every time we install resources , Will be based on package-lock.json Medium

integrity
verison
name

integrity、verison、name Relevant information will generate a unique key; This key Can correspond to index-v5 Cache records in directory ; If cache resources are found , Will find tar The package corresponds to hash value .
according to hash Then go to the cache tar package , Then pass... Again pacote Unzip and indent the binary files into our project node_modules Directory , This saves the network overhead of resource downloading .

What needs to be noted here is , The cache strategy here is npm v5 At the beginning , So in v5 Before that , Each cache module is mentioned earlier ~./npmrc Directly stored in the file in the format of module name
Storage format :{cache}{name}{version}.

Link to article source ：https://juejin.cn/post/7060844948316225572