The node_modules folder is notorious for adding tens of thousands of files to the node_modules folder. It takes a lot of time to install and delete files, and it takes up a lot of inodes. Take a look at the number of files in your project due to node_modules:

$ find . -type f | wc -l
223629
Copy the code

There are as many as 220,000 files under a single project.

Now let’s look at the current yarn version number:

$yarn - version 1.22.11Copy the code

Well, the current version of YARN is 1.22.11, so how do we install YARN 2? The answer is no installation, just setup.

$ yarn set version berry
Copy the code

After setting, let’s take a look at the yarn version number:

$yarn - version 3.0.0Copy the code

What happened to upgrading to YARN 2? How did it get to 3.0? Don’t panic. The higher the better.

Then let’s take a look at how many files there are in the project folder. First of all, there is one more in the root directory. Yarnrc. yml.

yarnPath: .yarn/releases/yarn-berry.cjs
Copy the code

Yarn, which has a subfolder named yarn, and a file named yarn-bery.cjs in it, which are all the files added to yarn 2, do not ignore them in.gitignore, the rest of the files need to be ignored. Now let’s add something to.gitignore that we need to ignore:

/node_modules
/.pnp
.pnp.js
.pnp.cjs
.yarn/cache
.yarn/unplugged
.yarn/install-state.gz
Copy the code

Next, we are going to use the new version of YARN to install our dependency files. Before this, we need to set up the yarn library image server to speed up the download process:

$ yarn config set npmRegistryServer https://registry.npm.taobao.org
Copy the code

Yml in the root directory of your project. Yarnrc. yml.

npmRegistryServer: 'https://registry.npm.taobao.org'
yarnPath: .yarn/releases/yarn-berry.cjs
Copy the code

Yml. Yarnrc. yml. You can also modify.yarnrc.yml directly to achieve the same effect.

Now let’s delete the old node_modules folder and yarn.lock file and rebuild the entire project:

$ rm -rf node_modules
$ rm -f yarn.lock
$ yarn
Copy the code

The entire download process should be relatively smooth, let’s take a look at the project folder to see what files:

.yarn/cache
.yarn/unplugged
.pnp
Copy the code

Without the node_modules folder, let’s look at the contents of the yarn/cache folder, which contains all the dependencies we previously relied on in the node_modules folder, but instead of being directories, they are zip files. The. Pnp. CJS file in the root directory of the project is used to locate these zip files to replace node_modules, which greatly reduces the number of files in the project.

Let’s start the project:

yarn start
Copy the code

Nine times out of ten, your project won’t get off the ground at this point. Don’t panic, this article will show you all the solutions.

First, you might encounter an error like this:

Error: Your application tried to access terser-webpack-plugin, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.
Copy the code

The details may vary, but you should pay attention to the keyword Your application. This means that somewhere in Your code you refer to the plugin, but you didn’t explicitly declare it in the package.json file. Since there used to be a node_modules folder, where all dependencies were spread out, even dependencies introduced by other dependencies would be released in the node_modules root directory, node could easily find it. Now there is no such folder. We must explicitly reference it in the package.json file to boot Yarn to find this dependency. Therefore, the solution to Your application’s lack of a dependency is as simple as installing it with YARN:

yarn add -D terser-webpack-plugin
Copy the code

Oh, another mistake:

Invalid options object. Terser Plugin has been initialized using an options object that does not match the API schema.
Copy the code

This is because we did not specify the version during the installation, so the version of the plug-in installed is too high. We will lower the version in package.json:

"Terser webpack - plugin" : "^ holdings".Copy the code

Then run yarn start to start the installation again. Finally, the installation is started! But don’t count your chickens before they are eggs. Here’s the problem:

Error: Your application tried to access @babel/plugin-transform-async-to-generator, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.
Copy the code

Don’t panic. If Your Application still lacks a dependency package, it is still our problem. Stop and install it again, then start again until all Your Application problems are resolved.

At this point, a new error occurs:

Module not found: rc-bmap tried to access babel-runtime, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.
Copy the code

We can’t find the dependency again, but this time the error is not caused by our application, but by the dependency itself. How can we solve this problem? Don’t worry, let’s open the.yarnrc.yml file and add the following Settings as prompted:

packageExtensions:
  'rc-bmap@*':
    dependencies:
      'babel-runtime': The '*'
Copy the code

Lack of what we add what, sometimes also pay attention to the version number. Again, this problem is not caused by YARN 2, but because our dependency is not increased, we are just filling in the dependency to make it work properly.

After modifying the. Yarnrc. yml file, you need to run yarn again and then yarn start.

At this point, our project is finally running successfully! Let’s take a look at the number of files currently in the project folder:

$ find . -type f | wc -l
17433
Copy the code

It now has 17,000 files, more than 200,000 fewer than the 220,000 files we started with, and it runs twice as fast.

Well, isn’t it worth a try?