Soft link & hard link application in front end

Front knowledge

First understand an important concept in an operating system: inode (Index Nodes).

inode

The inode is a file data structure used to store information about any Linux file other than its name and data.

Inode more details may refer to: www.ruanyifeng.com/blog/2011/1…

Sector
- The minimum storage unit of a hard disk is sector (512 bits per sector).
- The operating system reads multiple sectors at a time because it is inefficient to read one sector at a time

Block (block)
- Multiple sectors form a block, the most common size being 4KB (that is, made up of 8 sectors)
- A block is the smallest unit of file access in which file data is stored

Index node (inode)
- Store file meta-information, such as file creator, file creation date, file size, and so on
- Instead of using file names internally, Unix/Linux systems use inode numbers to identify files. To the system, the file name is simply an easily recognizable alias or nickname for the inode number.
- When opening a file, the system first finds the inode number of the file and then obtains inode information based on the inode number. The data is then read from the block where the file data in the inode resides.

The node method gets file information

const fs = require('fs')

const fileInfo = fs.statSync('./src/logo.svg')
console.log('File Info:', fileInfo)
Copy the code

Output information:

File info: Stats {dev: 16777220.mode: 33188.nlink: 1.uid: 501.gid: 20.rdev: 0.blksize: 4096.ino: 114457648.// The unique identifier of the inode
  size: 2632.blocks: 8.atimeMs: 1639292681311.895.mtimeMs: 1638968536815.0586.ctimeMs: 1638968536815.1282.birthtimeMs: 1638968536814.7827.atime: 2021-12-12T07:04:41.312Z,
  mtime: 2021-12-08T13:02:16.815Z,
  ctime: 2021-12-08T13:02:16.815Z,
  birthtime: 2021-12-08T13:02:16.815Z
}
Copy the code

The Linux command gets the inode

List the files and all inode ids in the directory with ls -i:

Soft (symbolic) links and hard links

Hard or soft links do not copy the original source file and only take up a very small amount of disk space.

Hard links

Multiple files can point to the same inode as the source file.

Deleting one file does not affect access to the other file, and changes to the file content are synchronized to all files.

Hard links can only be created for files, not for directories.

Application scenario: Mirroring data files to prevent data files from being deleted.

The relationship between source files and hard links:

Creating hard links

Create a hard link logohard. SVG using the Linux command to point to the source file logo.svg.

Logo.svg already exists and will be created automatically when the logohard.svg command is run.

View hard link information

To view the inode information of source files and hard-linked files:

const fs = require('fs')

const fileInfo = fs.statSync('./src/logo.svg')
console.log('Logo file information:', fileInfo)

const fileInfoHardLink = fs.statSync('./src/logoHard.svg')
console.log('Logo hard link file information:', fileInfoHardLink)
Copy the code

Output information:
- The ino information in both files is the same, and other information is exactly the same.
- Nlink indicates the number of links. Each additional file pointing to the inode increases the nlink value by 1. When the value drops to 0, the system automatically recycles itinodeAnd its correspondingblockArea.

$node link.js $node link.jsdev: 16777220.mode: 33188.nlink: 2.uid: 501.gid: 20.rdev: 0.blksize: 4096.ino: 114457648.size: 2632.blocks: 8.atimeMs: 1639295580440.4216.mtimeMs: 1638968536815.0586.ctimeMs: 1639295575616.7522.birthtimeMs: 1638968536814.7827.atime: 2021-12-12T07:53:00.440Z,
  mtime: 2021-12-08T13:02:16.815Z,
  ctime: 2021-12-12T07:52:55.617Z,
  birthtime: 2021-12-08T13:02:16.815Z} logo hard link file information: Stats {dev: 16777220.mode: 33188.nlink: 2.uid: 501.gid: 20.rdev: 0.blksize: 4096.ino: 114457648.size: 2632.blocks: 8.atimeMs: 1639295580440.4216.mtimeMs: 1638968536815.0586.ctimeMs: 1639295575616.7522.birthtimeMs: 1638968536814.7827.atime: 2021-12-12T07:53:00.440Z,
  mtime: 2021-12-08T13:02:16.815Z,
  ctime: 2021-12-12T07:52:55.617Z,
  birthtime: 2021-12-08T13:02:16.815Z
}
Copy the code

Soft links

Also called symbolic links.

A soft link is a link file that points to the address of the source file. Like an index or pointer.

If you modify the content of the source file, the content of the soft link will also change. An error occurs when accessing the soft link when deleting the source fileNo such file or directory.

The relationship between source files and soft links:

Creating soft Links

Linux Command creation

Create a soft link logosoft.svg using the Linux command to point to logo.svg

Node method creation

It is created using the fs.symlinksync (target, path[, type]) method provided by Node, where target represents the source file and path represents the soft link.

const fs = require('fs');
fs.symlinkSync('./src/logo.svg'.'./logoSoftV2.svg')
Copy the code

View the soft link information

Linux Command View

You can run the ls -il command to view the information about the soft link pointing & inode.

Node method

Use the fs.lStatsync (path[, options]) method provided by Node. Path indicates the path of the soft link.

const fs = require('fs');

const fileInfo = fs.statSync('./src/logo.svg')
console.log('Logo source file information:', fileInfo)

const logoSoftInfo = fs.lstatSync('./src/logoSoft.svg');
console.log('Logo soft link file information :', logoSoftInfo)
Copy the code

Output information:

Soft links and source files are different inodes, and other information is also different

Soft link files only store link information, so the file size is small

$node readsoftlink. jsdev: 16777220.mode: 33188.nlink: 3.uid: 501.gid: 20.rdev: 0.blksize: 4096.ino: 114457648.size: 2632.blocks: 8.atimeMs: 1639299883906.419.mtimeMs: 1639296458198.ctimeMs: 1639296496378.1218.birthtimeMs: 1638968536814.7827.atime: 2021-12-12T09:04:43.906Z,
  mtime: 2021-12-12T08:07:38.198Z,
  ctime: 2021-12-12T08:08:16.378Z,
  birthtime: 2021-12-08T13:02:16.815Z} logo soft link file information: Stats {dev: 16777220.mode: 41453.nlink: 1.uid: 501.gid: 20.rdev: 0.blksize: 4096.ino: 114734506.size: 14.blocks: 0.atimeMs: 1639296562078.7632.mtimeMs: 1639296562078.7632.ctimeMs: 1639296562078.7632.birthtimeMs: 1639296562078.7632.atime: 2021-12-12T08:09:22.079Z,
  mtime: 2021-12-12T08:09:22.079Z,
  ctime: 2021-12-12T08:09:22.079Z,
  birthtime: 2021-12-12T08:09:22.079Z
}
Copy the code

The difference between soft and hard links

Soft links and hard links reduce disk space in different ways, so what is the difference between them, and how should we choose which link mode to use in specific scenarios?

	Soft links	Hard links
inode	Soft links and source files have different inodes and are two different files	Hard links and source files have the same inode; they are actually hard links to each other
File attributes	Link to the file	Same type as the source file
Set up across file systems	support	Does not support
Number of links (that is, nlinks in file information)	Nlink does not increase with the number of soft links	Nlink is also incremented by 1 for each additional two-link
Deleting source Files	The soft link cannot be accessed	Hard link files can be accessed normally
application	1. Shortcuts (create desktop shortcuts in Windows)	Backup files to prevent accidental deletion

Soft link & hard link application in front end

yarn link

Official document: YarnpkG.top/clilink.htm…

A project package in development can be relied upon by other projects. Because it is still in development, the project package has not been released, and new features or debugs are usually tested in other projects using Yarn Link.

use

Scenario Example: When we develop requirements in business warehouse A (such as EP_student_client), warehouse A relies on our customized SDK. This SDK was developed in repository B (e.g. @byTED-ep /slardar developed in the Packasges repository).

Problems in development and debugging: During development and debugging, if yarn Link is not used, you can only compile and release the SDK, and then install the SDK in the A repository for verification. This is inefficient development.

Using yarn link:

Run in warehouse Byarn link

Run in warehouse Ayarn link [package...]

Through the above command we can achieve the changes in warehouse B can be synchronized to warehouse A.

Soft link usage

Yarn Link Source address: github.com/yarnpkg/yar…

Use the SDK @byted-scope-test/demo-cli to explain the YARN Link principle.

Args is run by checking if it has an argument passed inyarn linkoryarn link [package...]

yarn link
1. To create soft links folder, file path to/Users/yangxuelian/config/yarn/link / @ byted – scope – the test /. All link is management in/Users/yangxuelian/config/yarn/link directory.
2. Create a soft chain:
  1. SRC is the current directory path/Users/yangxuelian/Documents/practice/lerna-repo/packages/cli
  2. Dest for/Users/yangxuelian/.config/yarn/link/@byted-scope-test/demo-cli

yarn link @byted-scope-test/demo-cli
1. Create a soft link folder.
2. Create soft chain
  1. The SRC foryarn linkCreate a soft chain in/Users/yangxuelian/.config/yarn/link/@byted-scope-test/
  2. Dest is the directory where you want to create a soft link:/Users/yangxuelian/Documents/ep/ep_student_client/node_modules/@byted-scope-test/demo-cli

export async function run(config: Config, reporter: Reporter, flags: Object, args: Array<string>) :Promise<void> {
  if (args.length) {
    for (const name of args) {
      const src = path.join(config.linkFolder, name);
      if (await fs.exists(src)) {
        const folder = await getRegistryFolder(config, name);
        const dest = path.join(folder, name);
        await fs.unlink(dest);
        await fs.mkdirp(path.dirname(dest));
        await fs.symlink(src, dest);
        reporter.success(reporter.lang('linkUsing', name));
      } else {
        throw new MessageError(reporter.lang('linkMissing', name)); }}}else {
    // Create a soft chain for the current package
    const manifest = await config.readRootManifest();
    const linkLoc = path.join(config.linkFolder, name);

    if (await fs.exists(linkLoc)) {
      reporter.warn(reporter.lang('linkCollision', name));
    } else {
      // 1. Create a soft link file. 2. Point the soft link to the current directory
      await fs.mkdirp(path.dirname(linkLoc));
      await fs.symlink(config.cwd, linkLoc);
      // The bin part is processed separately by the command line
      if (manifest.bin) {
        const globalBinFolder = await getGlobalBinFolder(config, flags);
        for (const binName in manifest.bin) {
          // omit the SRC and dest parts of bin...
          if (await fs.exists(binDestLoc)) {
            reporter.warn(reporter.lang('binLinkCollision', binName));
          } else {
            if (process.platform === 'win32') {
              await cmdShim(binSrcLoc, binDestLoc, {createPwshFile: false});
            } else {
              await fs.symlink(binSrcLoc, binDestLoc);
            }
          }
        }
      }
    }
  }
}
Copy the code

pnpm

use

When we run PNPM install to install node_modules, we will use soft link & hard link to save disk space & improve installation efficiency.

Soft link usage

By executing PNPM install, the installed node_modules files are split into two parts:.pnpm directory & others.

.pnpm directory: Contains all the actual installed packages

Other file: package declared in package.json, but only generates a soft link. Actually points to the package installed in.pnpm.

Hard link usage

PNPM has a root directory, usually stored in user/.pnpm-store. PNPM uses hard links to ensure that the same package is not downloaded twice. For example, we have downloaded [email protected] in repoA once. When we install [email protected] in repoB, it will be reused. Specifically, express files in repoA and express files in repoB point to the same inode.

Reference documentation

Tangled links –ln, ln-s, fs.symlink, require

[Engineering] modern front-end engineering – silly not clear link fs. Symlink,ln, LN-S (Detailed explanation and application)

Linux: The difference between soft and hard connections

Figure out “file system” in one sitting with these 25 diagrams

Introduction topnpmSoft links and hard links

Practice:pnpmWhat pain points did it address?

❤️ Thank you

That is all the content of this sharing. I hope it will help you

Don’t forget to share, like and bookmark your favorite things.

Welcome to pay attention to the public number ELab team receiving factory good article ~

We are from the front end department of Bytedance, responsible for the front end development of all bytedance education products.

We focus on product quality improvement, development efficiency, creativity and cutting-edge technology and other aspects of precipitation and dissemination of professional knowledge and cases, to contribute experience value to the industry. Including but not limited to performance monitoring, component library, multi-terminal technology, Serverless, visual construction, audio and video, artificial intelligence, product design and marketing, etc.

Bytedance internal promotion code: BQEQ9TY

Post links: jobs.toutiao.com/s/8SudHqT

Soft link & hard link application in front end

Front knowledge

inode

The node method gets file information

The Linux command gets the inode

Soft (symbolic) links and hard links

Hard links

Creating hard links

View hard link information

Soft links

Creating soft Links

Linux Command creation

Node method creation

View the soft link information

Linux Command View

Node method

The difference between soft and hard links

Soft link & hard link application in front end

yarn link

use

Soft link usage

pnpm

use

Soft link usage

Hard link usage

Reference documentation

❤️ Thank you

Related Posts

NVM operation

Build front-end development environment

Modern Configuration Guide – Where is YAML better than JSON?