Forem: Mark

MVCC Concept: The No-Lock Approach for High-Concurrency Systems

Mark — Sat, 14 Feb 2026 06:57:41 +0000

In high-concurrency systems, traditional locking mechanisms often become performance bottlenecks. MVCC (Multi-Version Concurrency Control) provides a way to minimize locks or avoid them entirely. By using a “versioning + snapshot” approach, MVCC allows high-concurrency access while ensuring transaction isolation and data consistency. This article explains MVCC from its principles, essence, design philosophy, and practical insights for developers, so you can not only understand it but also apply its ideas in high-concurrency system design.

1. What is MVCC

MVCC (Multi-Version Concurrency Control) is a concurrency control mechanism with the core idea:

Instead of directly overwriting existing data, each write operation creates a new version. Each transaction works with its own snapshot of the data and determines which versions are visible based on version IDs, allowing reads and writes to proceed without blocking each other.

In MySQL InnoDB, MVCC supports:

Snapshot Read: Reads historical versions without locking
Current Read: Reads the latest version with locks, e.g., SELECT … FOR UPDATE

With this mechanism, read operations do not block write operations, and write operations do not unnecessarily block reads, greatly improving concurrency.

2. How MVCC Works

(1) Version Information and Undo Log

Each row in InnoDB contains hidden metadata:

trx_id: The transaction ID that last modified this row
roll_pointer: Points to the Undo log for retrieving previous versions

When a transaction reads data, InnoDB determines the visible version according to the transaction ID.

(2) Visibility Rules

The rules for determining whether a row is visible to a transaction:

If row.trx_id < current transaction ID and the corresponding transaction has committed → visible
If row.trx_id ≥ current transaction ID → not visible
Rows modified by the current transaction are always visible

(3) Undo Log and Snapshot Read

Undo logs store historical versions
Snapshot reads retrieve the correct version from the undo logs according to the transaction snapshot
Supports consistent reads without locking historical data

(4) Transaction Isolation Levels and MVCC

REPEATABLE READ: Default in InnoDB; ensures consistency within a transaction and prevents phantom reads using MVCC
READ COMMITTED: Reads the latest committed data each time
SERIALIZABLE: Reads acquire locks, limiting the effect of MVCC

3. The Essence of MVCC

At its core, MVCC can be summarized as:

Using multiple versions of data to enable snapshot reads and transaction isolation, improving concurrency while maintaining consistency.

Key points:

Multiple versions: Every modification creates a new version, preserving history
Transaction snapshots: Each transaction sees its own consistent view
Minimized locking: Reads are mostly lock-free, and writes only lock when necessary

4. The Philosophy of MVCC

From MVCC, we can extract several design principles for high-concurrency systems:

1. Minimize dependency on locks

Reads and writes do not block each other; locks are used only when necessary

2. Versioning and Snapshot Reads

Each transaction sees its own view
Reading older versions reduces lock contention

3. Consistency over immediate mutual exclusion

Not all operations need to be synchronized in real-time
Use snapshots and versioning to determine visibility

4. Practical development principles

High concurrency is not about adding more locks, but using versioning, snapshots, and asynchronous processing to avoid blocking
Applicable to caches, queues, distributed systems, and microservices

5. Insights for Developers

1. Read-write separation: Use caches or read replicas to reduce lock contention

2. Versioned operations: Optimistic locking, historical records, soft deletes

3. Asynchronous processing: Handle non-critical writes asynchronously

4. Snapshot awareness: Use snapshot data for analytics, pagination, or reporting to reduce blocking

5. System design mindset: High concurrency is achieved through design, not by adding locks

Conclusion

MVCC is not just a database implementation—it is a design philosophy for high-concurrency systems:

It aims to minimize locks by using versioning, snapshots, and visibility rules, allowing operations to proceed without blocking while ensuring data consistency. What we should truly learn from this is the underlying mindset—and apply it to our development practices. For example:

- Caching and read replicas: Serve read requests from cache or replicas to reduce lock contention on the main database.

- Optimistic concurrency control: Use version numbers or timestamps to handle updates without locking resources.

- Asynchronous processing: Queue non-critical writes or long-running operations to avoid blocking user requests.

- Snapshot-based analytics or reporting: Perform statistical queries or pagination on a snapshot to prevent interference with real-time writes.

- Distributed systems and microservices: Design state management so that each service can work with its own consistent view, reducing cross-service blocking.

In short, the MVCC mindset is about designing systems so that operations can proceed concurrently as much as possible, without relying on locks, while still maintaining consistency.

How to Contribute to Open Source Projects

Mark — Fri, 26 Jul 2024 05:05:17 +0000

Recently, I have made a contribution to material-ui, a very popular React UI component library.

I picked up the task from this issue, this is my merged pull request.

In this article, I would like to share the basic steps about contributing to open source projects for beginners.

Fork the repository, you should fork all branches.

Clone the fork to your local machine and add the upstream remote

git clone https://github.com/<your username>/material-ui.git
cd material-ui
git remote add upstream https://github.com/mui/material-ui.git

Synchronize your local next branch with the upstream one:

git checkout next
git pull upstream next

Install the dependencies with pnpm (yarn or npm aren't supported):

pnpm install

You can run the project on your local machine

npm run start

Now you can get familiar with the project structure, it use monorepo to manage many projects in a single code repository. You can check out my series, Building a Vue 3 Component Library from Scratch, if you are getting fear about this big project.

The next step is to pick up a task that you can handle, https://github.com/mui/material-ui/issues

Before you pick up your first issue, You should read this https://github.com/mui/material-ui/blob/next/CONTRIBUTING.md#your-first-pull-request

For me, I picked a task from this issue.

Before you change the code, Create a new topic branch with meaningful name.

git checkout -b react-complier-mui-utils

Make changes, commit, and push to your fork:

git push -u origin HEAD

You can learn the pull request witch fix similar issues merged successfully, checkout how they changed the code.

For me, I refer to this pull request, it just add some comment code in File Changes, so I try to add some comment for the files too.

After pushing your code, you can see pull request button, click it and write your own pull request.

After submitting pull request, the project maintainer will review your code, sometimes they will give you suggestion to make your changes better, you will learn a lot here. When everything is ok, they will merge it.

Throttling and Debouncing in JavaScript

Mark — Sun, 21 Jul 2024 09:45:11 +0000

Throttling and Debouncing is involved where high-frequency events are triggered, such as resize, scroll, input, etc. The core idea of debounce and throttle is to add a control layer between events and functions to delay execution. The goal is to prevent frequent execution of certain operations within a certain period of time, which would lead to a waste of resources.

The control layer between events and functions is usually implemented in two ways:

Using a timer. Each time an event is triggered, it is determined whether there is already a timer.
Using timestamp difference. Record the timestamp of the last event trigger, each time an event is triggered, determine whether the difference (delay - (now - previous)) between the current timestamp and the last execution timestamp has reached the set delay time.

Debouncing

Definition

Debouncing is the process of executing a callback function after an event is triggered for a specified time. If the event is triggered again within the specified time, the timer is reset according to the last trigger.

When an event is continuously triggered, the event handling function will only execute once if no event is triggered within a certain period. If an event is triggered again before the set time arrives, the delay is restarted. As shown in the following figure, the handle function is not executed when the scroll event is continuously triggered. Only when no scroll event is triggered within 1000 milliseconds, the scroll event will be delayed and triggered.

Example - Autocomplete Input

Unoptimized Implementation

Search box suggestion prompts: When we input character, we may request data from an API. If there is no optimization, the API will be continuously triggered from the start of the input, which will inevitably lead to resource wastage. It's also not wise to frequently change the DOM element in html tree.

// Bad code 
<html>   
    <body>     
        <div> search: <input id="search" type="text"> </div>   
        <script>
            const searchInput = document.getElementById("search"); 
            searchInput.addEventListener('input', ajax);       
            function ajax(e) { 
                // mock         
                console.log(`Search data: ${e.target.value}`);       
            }     
        </script>   
   </body> 
</html>

In the above code, we don't have any optimization. We use the ajax() method to simulate data requests. Let's see the result.

If a real API is being called, it would continuously hit the server-side interface from the moment of input. It could also easily trigger rate limiting measures of the API. For example, the API provided by Github has a maximum request limit per hour.

Debounce Optimization

The principle is to use a marker to determine whether there are multiple calls within a specified time. When there are multiple calls, the previous timer is cleared and the timing starts again. If there is no further call within the specified time, the passed-in callback function (fn) is executed.

function debounce(fn, ms) {   
    let timerId;    
    return (...args) => {
        if (timerId) {       
            clearTimeout(timerId);     
        }    

        timerId = setTimeout(() => {       
            fn(...args);     
        }, ms);   
    } 
}

Usage

const handleSearchRequest = debounce(ajax, 500)  
searchInput.addEventListener('input', handleSearchRequest);

This is much better. When users input stops, it takes the last input text as the data param to request the API, avoiding request too many times.

Throttling

Throttling is the execution of a callback function at a specified interval after an event is triggered.

When an event is continuously triggered, it ensures that the event handling function is called only once within a certain time period. A common analogy for throttling is like water flowing from a faucet. When the valve is opened, water flows down rapidly. In the spirit of frugality, we want to reduce the flow from the faucet, ideally letting it drip down at a certain interval according to our wishes. For example, when a scroll event is continuously triggered, the handle function is not executed immediately, but rather every 1000 milliseconds.

Example - Scroll to The Top

The page has many list items, and after scrolling down, we hope a 'Top' button appears that can take us back to the top when clicked. At this point, we need to get the distance from the scroll position to the top to determine whether to display the 'Top' button.

Unoptimized Implementation

<body>   
    <div id="container"></div>   
    <script>     
        const container = document.getElementById('container');
        window.addEventListener('scroll', handleScrollTop);
        function handleScrollTop() {       
            console.log('scrollTop: ', document.body.scrollTop);       
            if (document.body.scrollTop > 400) { 
                // Handler to show top button       
            } else {      
                // Handler to hide top button
            }     
        }   
    </script> 
</body>

As we can see, without any optimization, a single scroll might trigger hundreds of times, and processing each one is evidently a waste of performance.

Throttling Optimization

Implement a simple throttle function, is very similar to debounce. The difference is that here we use a flag to determine whether it has been triggered. Once it has been triggered, incoming requests are directly terminated until the previous specified interval has elapsed and the callback function has been executed, then it accepts the next process.

function throttle(fn, ms) { 
    let flag = false;   
    return (...args) => {   
        if (flag) return;    
        flag = true;     
        setTimeout(() => {  
            fn(...args)      
            flag = false;  
        }, ms);   
    } 
}

Usage

const handleScrollTop = throttle(() => {  
    console.log('scrollTop: ', document.body.scrollTop);  
        // todo: 
}, 500); 
window.addEventListener('scroll', handleScrollTop);

This one is much better with the above one.

Two Ways to Implement Throttling: Timestamps and Timers

Timestamp

var throttle = function(func, delay) {            
　　var prev = Date.now();            
　　return function() {                
　　　　var context = this;                
　　　　var args = arguments;                
　　　　var now = Date.now();                
　　　　if (now - prev >= delay) {                    
　　　　　　func.apply(context, args);                    
　　　　　　prev = Date.now();                
　　　　}            
　　}        
}        
function handle() {            
　　console.log(Math.random());        
}        
window.addEventListener('scroll', throttle(handle, 1000));

Timers

var throttle = function(func, delay) {            
    var timer = null;            
    return function() {                
        var context = this;               
        var args = arguments;                
        if (!timer) {                    
            timer = setTimeout(function() {                        
                func.apply(context, args);                        
                timer = null;                    
            }, delay);                
        }            
    }        
}        
function handle() {            
    console.log(Math.random());        
}        
window.addEventListener('scroll', throttle(handle, 1000));

Summary

Function Debounce: Combines multiple operations into a single operation. The principle is to maintain a timer, which triggers the function after a delay time. However, if it is triggered again within the delay time, the previous timer will be cancelled and reset. In this way, only the last operation can be triggered.

Window Resize Event, It is used when window size adaptation is needed. In this case, debounce is generally used because only the last change needs to be considered.
Search Input Event, If the input interval is greater than a certain value (such as 500ms), it is considered that the user has finished inputting and then starts searching.

Function Throttle: Ensures that a function is only triggered once within a certain period. The principle is to trigger the function by determining whether a certain time has been reached.

Scroll to Top
Search Input Event, for example, to implement real-time search input, throttle can be used.

Difference: Function throttling ensures that no matter how frequently the event is triggered, the actual event handling function will be executed once within a specified time, while function debounce only triggers a function after the last event. For example, in the scenario of infinite page scroll loading, we need the user to send an Ajax request every once in a while when scrolling the page, instead of requesting data only when the user stops scrolling. This scenario is suitable for the use of throttling technology.

My CSS Units Best Practices

Mark — Wed, 17 Jul 2024 16:44:20 +0000

There are many units in CSS, such as %, px, em, rem, vw, vh, etc. Each unit has a specific usage.

How to pick which css units to use in different circumstance, in this article I am going to talk about the best generalizations.

Before we dive in, I want you to remember this is just rule of thumb, It is just for helping you choose which unit in different situation.

Width

In the most situation, % in combination with a max-width is the best choose.

.container {
  width: 50%;
  max-width: 1000px
}

Height

In the most situation, you don't need set fixed height, use min-height instead.

Padding and Margin

In the most situation, use rem or em.

If your padding and margin is consistent use rem, if it is base on font size use em.

For example, we always use em for button padding, it will grow and adjust along with font size.

.btn {
  display: inline-block;
  text-decoration: none;
  background: #000;
  color: #fff;
  padding: 1em;
  font-size: 2rem;
}

If you change font-size bigger, the padding will grow too.

Media Query

We use em for media query break point, check out this article for detail, https://zellwk.com/blog/media-query-units/

Other Rules

px only for little things like shadows, borders etc.

This article is based on this youtube video.
https://www.youtube.com/watch?v=N5wpD9Ov_To

Top 6 React Hook Mistakes Beginners Make

Mark — Sun, 14 Jul 2024 16:46:04 +0000

The hardest part about learning react is not actually learning how to use react but instead learning how to write good clean react code.

In this article, I will talk about 6 mistakes that I see almost everyone making with the useState and useEffect hook.

Mistake 1, Using state when you don't need it

The very first mistake that I want to talk about is using state when you don't actually need any state.

Let's take a look at this example.

import {useState} from "react";

const App = () => {

  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  function onSubmit(e) {
    e.preventDefault();
    console.log({ email, password });
  }

  return (
      <form onSubmit={onSubmit}>
        <label htmlFor="email">Email</label>
        <input
            value={email}
            onChange={e => setEmail(e.target.value)}
            type="email"
            id="email"
        />
        <label htmlFor="password">Password</label>
        <input
            value={password}
            onChange={e => setPassword(e.target.value)}
            type="password"
            id="password"
        />
        <button type="submit">Submit</button>
      </form>
  )

};

export default App;

We use email and password state here, but the problem is we only care the email and password value when submit the form, we don't need re-render when email and password updated, so instead of tracking the state, and re-render every time I typed a character, I am going to store these inside of a ref.

import { useRef } from "react";

const App = () => {

  const emailRef = useRef();
  const passwordRef = useRef();

  function onSubmit(e) {
    e.preventDefault();
    console.log({
      email: emailRef.current.value,
      password: passwordRef.current.value
    });
  }

  return (
      <form onSubmit={onSubmit}>
        <label htmlFor="email">Email</label>
        <input
            ref={emailRef}
            type="email"
            id="email"
        />
        <label htmlFor="password">Password</label>
        <input
            ref={passwordRef}
            type="password"
            id="password"
        />
        <button type="submit">Submit</button>
      </form>
  )

};

export default App;

If you click the submit, and look at the console again, it will print the values. You don't need any state at all for this.

So the first tip for you is thinking do you really need to use states, and re-render the components every time state changes, or can you use a ref if you don't need re-render the components.

Also you can access the data in the form directly, so you don't need refs too.

import { useRef } from "react";

const App = () => {

    function onSubmit(event) {
        event.preventDefault();
        const data = new FormData(event.target);
        console.log(data.get('email'));
        console.log(data.get('password'));
        fetch('/api/form-submit-url', {
            method: 'POST',
            body: data,
        });
    }

    return (
        <form onSubmit={onSubmit}>
            <label htmlFor="email">Email</label>
            <input
                type="email"
                name="email"
                id="email"
            />
            <label htmlFor="password">Password</label>
            <input
                type="password"
                name="password"
                id="password"
            />
            <button type="submit">Submit</button>
        </form>
    )

};

export default App;

Mistake 2, Not using the function version of useState

Let's take a look at this example.

import { useState } from "react";

export function Counter() {

    const [count, setCount] = useState(0);

    function adjustCount(amount) {
        setCount(count + amount);
        setCount(count + amount);
    }

    return (
        <>
            <button onClick={ () => adjustCount(-1) }> - </button>
            <span> {count} </span>
            <button onClick={ () => adjustCount(1) }> + </button>
        </>
    )
}

If you click the button, the count will update only once, even you setCount twice. This is because when the second setCount trigger, the first setCount not finished, the count value is not updated.

You should use function version to fix this problem.

https://legacy.reactjs.org/docs/hooks-reference.html#functional-updates

import { useState } from "react";

export function Counter() {

    const [count, setCount] = useState(0);

    function adjustCount(amount) {
        setCount(prevCount => prevCount + amount);
        setCount(prevCount => prevCount + amount);
    }

    return (
        <>
            <button onClick={ () => adjustCount(-1) }> - </button>
            <span> {count} </span>
            <button onClick={ () => adjustCount(1) }> + </button>
        </>
    )

}

Mistake 3, State dose not update immediately

Let's take a look at this example.

import { useState } from "react";

export function Counter() {

    const [count, setCount] = useState(0);

    function adjustCount(amount) {
        setCount(prevCount => prevCount + amount);
        // count is the value before setCount
        console.log(count);
    }

    return (
        <>
            <button onClick={ () => adjustCount(-1) }> - </button>
            <span> {count} </span>
            <button onClick={ () => adjustCount(1) }> + </button>
        </>
    )
}

When you update your state variable, it actually doesn't change right away, it doesn't change until next render, so instead of putting code after your state setter, you should use useEffect.

import {useEffect, useState} from "react";

export function Counter() {

    const [count, setCount] = useState(0);

    useEffect(() => {
        console.log(count);
    }, [count])

    function adjustCount(amount) {
        setCount(prevCount => prevCount + amount);
    }

    return (
        <>
            <button onClick={ () => adjustCount(-1) }> - </button>
            <span> {count} </span>
            <button onClick={ () => adjustCount(1) }> + </button>
        </>
    )

}

Mistake 4, Unnecessary useEffect

Let's take a look at this example.

import { useEffect, useState } from "react";

const App = () => {

    const [firstName, setFirstName] = useState('')
    const [lastName, setLastName] = useState('')
    const [fullName, setFullName] = useState('')

    useEffect(() => {
        setFullName(`${firstName} ${lastName}`);
    }, [firstName, lastName])

    return (
        <>
            <input value={firstName} onChange={ e => setFirstName(e.target.value) } />
            <input value={lastName} onChange={ e => setLastName(e.target.value) } />
            {fullName}
        </>
    )

};

export default App;

The problem is when we update firstName or lastName, the state fullName will update and re-render component again, it re-render twice.

How to make it to be optimal.

import { useState } from "react";

const App = () => {

    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');

    const fullName = `${firstName} ${lastName}`;

    return (
        <>
            <input value={firstName} onChange={ e => setFirstName(e.target.value) } />
            <input value={lastName} onChange={ e => setLastName(e.target.value) } />
            {fullName}
        </>
    )

};

export default App;

Mistake 5, Referential equality mistakes

Let's take a look at this example.

import {useEffect, useState} from "react";

const App = () => {

    const [age, setAge] = useState(0);
    const [name, setName] = useState('');
    const [darkMode, setDarkMode] = useState(false);

    const person = { age, name };

    useEffect(() => {
        console.log(person)
    }, [person])

    return (
        <div style={{ background: darkMode ? "#333" : "#fff" }}>
            Age: {" "}
            <input value={age} type="number" onChange={ e => setAge(e.target.value)} />
            <br/>
            Name: <input value={name} onChange={ e => setName(e.target.value) } />
            <br/>
            Dark Mode: {" "}
            <input type="checkbox" value={darkMode} onChange={e => setDarkMode(e.target.checked)} />
        </div>
    )
};

export default App;

If you change age or name, useEffect function will be triggered, but if you toggle darkMode, the useEffect function triggered too, this is not what we expected.

There are two key point make this happen.

Firstly, Each render has its own props and state, so the variable person will be initialize as a new one. Checkout this article, if you want to study this in detail, https://overreacted.io/a-complete-guide-to-useeffect/

The second point is Referential equality, https://barker.codes/blog/referential-equality-in-javascript/
so the variable person is not equal when darkMode updated.

We can use useMemo to fix this problem.

import {useEffect, useMemo, useState} from "react";

const App = () => {

    const [age, setAge] = useState(0);
    const [name, setName] = useState('');
    const [darkMode, setDarkMode] = useState(false);

    const person = useMemo(() => {
        return { age, name }
    }, [age, name])

    useEffect(() => {
        console.log(person)
    }, [person])

    return (
        <div style={{ background: darkMode ? "#333" : "#fff" }}>
            Age: {" "}
            <input value={age} type="number" onChange={ e => setAge(e.target.value)} />
            <br/>
            Name: <input value={name} onChange={ e => setName(e.target.value) } />
            <br/>
            Dark Mode: {" "}
            <input type="checkbox" value={darkMode} onChange={e => setDarkMode(e.target.checked)} />
        </div>
    )
};

export default App;

Please note, you can use React Compiler instead of useMemo in React 19 version.

Mistake 6, Not aborting fetch requests

Let's take a look at this example.

import {useEffect, useState} from "react";

export function useFetch(url) {

    const [loading, setLoading] = useState(true);
    const [data, setData] = useState();
    const [error, setError] = useState();

    useEffect(() => {
        setLoading(true)
        fetch(url)
            .then(setData)
            .catch(setError)
            .finally(() => setLoading(false))
    }, [url])

}

The problem in this example is when the component unmounted, or url changed, the previous fetch still working in the background, it will work not as expect in many situation, checkout out this article in detail, https://plainenglish.io/community/how-to-cancel-fetch-and-axios-requests-in-react-useeffect-hook

We can fix this problem using AbortController.

import {useEffect, useState} from "react";

export function useFetch(url) {

    const [loading, setLoading] = useState(true);
    const [data, setData] = useState();
    const [error, setError] = useState();

    useEffect(() => {
        const controller = new AbortController();
        setLoading(true)
        fetch(url, { signal: controller.signal })
            .then(setData)
            .catch(setError)
            .finally(() => setLoading(false))

        return () => {
            controller.abort();
        }

    }, [url])

}

This article is based on this youtube video. https://www.youtube.com/watch?v=GGo3MVBFr1A

Install and Set Up Kubernetes on Linux

Mark — Sat, 29 Jun 2024 13:58:01 +0000

This article is about setting up kubernetes use kubeadm.

Prerequisites

Prepare two or more servers running Linux in the same network.

Set Hostname

sudo hostnamectl set-hostname k8-smaster
sudo hostnamectl set-hostname k8-node1
sudo hostnamectl set-hostname k8-node2

vim /etc/hosts

192.168.x.x k8-smaster
192.168.x.x k8-node1
192.168.x.x k8-node2

Disable Selinux

Check

[root@dev-server ~]# getenforce
Disabled
[root@dev-server ~]# /usr/sbin/sestatus -v
SELinux status:                 disabled

Temporarily Closed

##Set SELinux to permissive mode
##setenforce 1 sets SELinux to enforcing mode
setenforce 0

Permanently Disable

vi /etc/selinux/config

Change SELINUX=enforcing to SELINUX=disabled. The setting will take effect after a restart.

Swap Off

Check

free -m

Temporarily Closed

swapoff -a

Permanently Disable

sed -ri 's/.*swap.*/#&/' /etc/fstab

Disable Firewall

systemctl status firewalld
systemctl stop firewalld
systemctl disable firewalld
chkconfig iptables off
sudo iptables -F
sudo iptables -X
sudo iptables -L

Enable IPv4 packet forwarding

https://kubernetes.io/docs/setup/production-environment/container-runtimes/

# sysctl params required by setup, params persist across reboots
cat <<EOF | sudo tee /etc/sysctl.d/k8s.conf
net.ipv4.ip_forward = 1
EOF

# Apply sysctl params without reboot
sudo sysctl --system

Install Docker

https://docs.docker.com/engine/install/centos/

Install CRI

wget https://github.com/Mirantis/cri-dockerd/releases/download/v0.3.14/cri-dockerd-0.3.14.amd64.tgz
tar xvf cri-dockerd-0.3.14.amd64.tgz
mv ./cri-dockerd/* /usr/local/bin/

wget https://raw.githubusercontent.com/Mirantis/cri-dockerd/master/packaging/systemd/cri-docker.service
wget https://raw.githubusercontent.com/Mirantis/cri-dockerd/master/packaging/systemd/cri-docker.socket
sudo mv cri-docker.socket cri-docker.service /etc/systemd/system/
sudo sed -i -e 's,/usr/bin/cri-dockerd,/usr/local/bin/cri-dockerd,' /etc/systemd/system/cri-docker.service

systemctl daemon-reload
systemctl enable cri-docker.service
systemctl enable --now cri-docker.socket

systemctl status cri-docker.socket

Installing kubeadm, kubelet and kubectl

https://kubernetes.io/docs/setup/production-environment/tools/kubeadm/install-kubeadm/

kubeadm config images pull --cri-socket unix:///var/run/cri-dockerd.sock
kubeadm version

Init Master Node

kubeadm init \
--apiserver-advertise-address=192.168.116.133 \
--control-plane-endpoint=k8smaster \
--kubernetes-version=v1.30.2 \
--service-cidr=10.96.0.0/16 \
--pod-network-cidr=192.168.0.0/16 \
--cri-socket=unix:///var/run/cri-dockerd.sock

Join Node into Master

kubeadm join k8smaster:6443 --token cgdl45.0c8wq1z9pxez59jr \
        --discovery-token-ca-cert-hash sha256:2fabc33e8c57c01f3214cf69dff97acc54ad6dd727f1255143bf310c4b40e2cb --cri-socket=unix:///var/run/cri-dockerd.sock

Next step, install canal and dashboard.

How to Read a JSON File in JavaScript

Mark — Tue, 11 Jun 2024 15:37:12 +0000

When you need to read a json file in your project, it is easy to get the idea using fetch or axios.

For example, we have data.json.

{
    "name": "Hello World",
    "age": 18
}

Use fetch to read.

fetch('https://server.com/data.json')
    .then((response) => response.json())
    .then((json) => console.log(json));

It works when your project is running in web browser environment, but when your project is running in hybrid environment, it is file protocol instead of http protocol. You will get cors error.

You can use script tag to fix this problem.

Change data.json to data.js

window.config = {
    "name": "Hello World",
    "age": 18
}

Add script tag in your html file template.

<!--      <script src="./data.js"> </script>-->
      <script>
          document.write('<script src="./data.js?t=' + new Date().getTime() + '"><\/script>')
      </script>

Now you can read data from window object in your javascript code.

const data = window.config
console.log(data)

Vite - Code Splitting Strategy

Mark — Tue, 11 Jun 2024 07:21:06 +0000

The Problem Solved by Code Splitting

Firstly, let's look at the problems with the traditional single chunk packaging mode:

Can not import on demand

All the code is bundled into one chunk, which means that the code needed for page initialization and the code for the route components are all bundled together.

Can not use network cache

Normally, the name of a chunk is generated based on the hash value of the file content. Therefore, every time the code is modified, the name of the chunk changes, which prevents the browser from using the local cache.

Code splitting is aimed at resolving these issues to enhance page load performance.

Vite's Default Chunk Splitting Strategy

Before version 2.9

One chunk corresponds to one CSS file.
Logic code will be packaged into one chunk.
Third-party dependencies are packaged into one chunk.

After version 2.9

The changed place is that both the third-party packages and the business code are now in one chunk.

If you want to control the code splitting strategy with a finer granularity, you need to use the manualChunks configuration. The config is approximately as follows:

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        /**
         * 1. Use in object form
         * Package the lodash module into a chunk, named lodash
         */
         manualChunks: {
           lodash: ['lodash'],
         },

        /**
         * 2. Use in function form
         * Package all third-party packages into one chunk, named vendor
         */
        manualChunks(id, { getModuleInfo, getModuleIds }) {
          if (id.includes('node_modules')) {
            return 'vendor';
          }
        },
      },
    },
  },
});

Multiple HTML Files Using Webpack

Mark — Mon, 10 Jun 2024 09:13:36 +0000

Frameworks like React and Vue are single-page applications, which means generating a single HTML file with all JS referenced and executed within this page.

In this article, we're going to discuss how to package multi-page application in webpack, that is, generating multiple HTML files during the packaging process, because there might still be scenarios where multi-page applications are used in some older project.

We will use the html-webpack-plugin to achieve this.

Let's Write Some Code

Besides the entry file index.js, we will create two more files: list.js and detail.js. We will use these three as the files to be bundled.



// index.js
import React, { Component } from 'react';
import { createRoot } from 'react-dom/client';
class App extends Component {
    render() {
        return <div>Index Page</div>;
    }
}
const root = createRoot(document.getElementById('app'));
root.render(React.createElement(App));

// list.js
import React, { Component } from 'react';
import { createRoot } from 'react-dom/client';
class App extends Component {
    render() {
        return <div>List Page</div>;
    }
}
const root = createRoot(document.getElementById('app'));
root.render(React.createElement(App));

// details.js
import React, { Component } from 'react';
import { createRoot } from 'react-dom/client';
class App extends Component {
    render() {
        return <div>Details Page</div>;
    }
}
const root = createRoot(document.getElementById('app'));
root.render(React.createElement(App));

Now we have three pages, and I want to generate three HTML pages: index.html, list.html, and details.html. How should we configure this?

Configuring Multiple Entries

Now that we have three js files, we need to configure three entry points:



...

module.exports = {
  entry: {
    main: "./src/index.js",
    list: "./src/list.js",
    details: "./src/details.js",
  },
  output: {
    clean: true,
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].chunk.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html', // to import index.html file inside index.js
      filename: 'index.html',
    })
  ],
optimization: {
    usedExports: true,
    runtimeChunk: {
      name: 'runtime',
    },
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          name: 'vendors',
        }
      }
    },
  ...
}

...

After running 'npm run build', we can see that it has bundled details..js and list..js:

However, there is only one HTML file, and this HTML page includes all the js files we have bundled.

This is not the result we want. What we want is to include index.js in index.html, list.js in list.html, and details.js in details.html.

In this case, we need to use html-webpack-plugin to help us generate several more pages, and include the corresponding js files or chunks.

Configuring html-webpack-plugin

To generate multiple HTML files, we still need to use the handy tool html-webpack-plugin. It has many parameters that you can refer to in the official html-webpack-plugin documentation. Here, we will use the 'filename' and 'chunks' parameters, which correspond to the names of the generated HTML files and the chunks to be included in the page, respectively. We modify the webpack.config.js configuration and add two more instances of html-webpack-plugin:



...

module.exports = {
  entry: {
    main: "./src/index.js",
    list: "./src/list.js",
    details: "./src/details.js",
  },
  ...
  plugins: [
    ...
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      filename: 'index.html',
      chunks: ['runtime', 'vendors', 'main'],
    }),
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      filename: 'list.html',
      chunks: ['runtime', 'vendors', 'list'],
    }),
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      filename: 'details.html',
      chunks: ['runtime', 'vendors', 'details'],
    }),
    ...
  ],
  optimization: {
    usedExports: true,
    runtimeChunk: {
        name: 'runtime',
    },
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          name: 'vendors',
        }
      }
    },
  },
}

...

The 'chunks' configuration in HtmlWebpackPlugin refers to the JavaScript files, which are included into the HTML after being bundled by webpack.

Let's re-package it by running 'npm run build'. Three HTML files are generated in the 'dist' directory, and each HTML file includes the corresponding JavaScript:

index.html

list.html

details.html

Everything has been successfully bundled. When we open each page, they all run normally.

Configuration Optimization

If we add a new entry point, we need to manually add another html-webpack-plugin and set the corresponding parameters.

How do we automatically add a new html-webpack-plugin based on the entry point, let's just do it.

We can assemble the html-webpack-plugin based on the entry file:



const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const entry = {
  main: "./src/index.js",
  list: "./src/list.js",
  detail: "./src/detail.js",
}

module.exports = {
...
  entry: entry,
  output: {
    clean: true,
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].chunk.js'
  },
  plugins: [
    ...Object.keys(entry).map(item => // loop entry files and map HtmlWebpackPlugin
      new HtmlWebpackPlugin({
        template: 'src/index.html',
        filename: `${item}.html`,
        chunks: ['runtime', 'vendors', item]
      })
    )
  ],
  optimization: {
    usedExports: true,
    runtimeChunk: {
      name: 'runtime',
    },
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          name: 'vendors',
        }
      }
    },
  }
...
};

Let's re-package it by running 'npm run build'. The page has been successfully bundled.

At this point, when we add a new entry, all we need to do is configure the entry file. For example, if we want to add a 'userInfo' page, we just need to configure it in the entry file:



entry: {
    index: "./src/index.js",
    list: "./src/list.js",
    details: "./src/details.js",
    userInfo: "./src/userInfo.js"
},

Deep Dive into SideEffects Configuration

Mark — Tue, 04 Jun 2024 15:11:03 +0000

In Webpack2, support for ES Modules was added, allowing Webpack to analyze unused export content and then tree-shake it away. However, code in the module that has side effects will be retained by Webpack.

For example, there are modules utils/a.js and utils/b.js in the project, and a unified entry is provided through utils/index.js. The module b contains a print statement, which has side effects.

// utils/a.js
export function a() {
   console.log('aaaaaaaaaaaaa');
}

// utils/b.js
console.log('======== b.js ==========');
export function b() {
   console.log('bbbbbbbbbbbbbb');
}

// utils/index.js
export * from './a';
export * from './b';

We add main entry, app.js, which only references the module a. We expect the unused module b to be tree-shaken away.

// app.js
import { a } from './utils';
a();

Let's take a look at the output of webpack build, note that we should use production mode. The results as follows, I have removed the irrelevant webpack startup code.

// output
([
 function(e, t, r) {
   'use strict';
   r.r(t),
     console.log('======== b.js =========='),
     console.log('aaaaaaaaaaaaa');
 },
])

The module b is not included, but the side effect code in b.js is retained, which is reasonable.

What is sideEFfects?

Let's modify the content of b.js.

// utils/b.js
Object.defineProperty(Array.prototype, 'sum', {
   value: function() {
       return this.reduce((sum, num) =sum += num, 0);
   }
})
export function b() {
   console.log([1, 2, 3, 4].sum());
}

We have defined a new method 'sum' on the Array prototype, which has side effects. Then we call this method in the module b, but as the maintainer of the module b, I hope that 'sum' is 'pure', only used by me, and the outside does not depend on its implementation.

Modify package.json, add a new field "sideEffects": false, this field indicates that the entire project is 'side effect free'. Use webpack to compile again, expecting that when the b module is not used, the 'sum' method defined in b will also be tree-shaken off. The result is as follows.

([
 function(e, t, r) {
   'use strict';
   r.r(t), console.log('aaaaaaaaaaaaa');
 },
])

As expected, the entire module b has been tree-shaken off, including the code with side effects.

Therefore, sideEffects can optimize the package size, and to a certain extent, it can reduce the process of webpack analyzing the source code, speeding up the building speed.

You can try the packaging results in situations like referencing the b module, setting the sideEffects value to true, or removing the sideEffects, etc.

sideEffects Configuration

Besides being able to set a boolean value, sideEffects can also be set as an array, passing code files that need to retain side effects (for example: './src/polyfill.js'), or passing wildcard characters for fuzzy matching (for example: 'src/*/.css').

sideEffects: boolean | string[]

Precautions for sideEffects

In real projects, we usually can't simply set "sideEffects" to false, as some side effects need to be retained, such as importing style files.

Webpack will consider all 'import xxx' statements as imports that are not used. If you mistakenly declare them as 'without side effects', they will be tree-shaken away. And since tree-shaking only takes effect in production mode, everything may still seem normal during local development, and problems may not be detected in a timely manner in the production environment.

The following are examples of 'imports that are not used'.

import './normalize.css';
import './polyfill';
import './App.less';

This is import and used.

import icon from './icon.png';
function Icon() {
   return (
       <img src={icon} />
   )
}

For these files with side effects, we need to declare them correctly by modifying the sideEffects value.

// package.json
"sideEffects": [
 "./src/**/*.css"
]

When using it, be sure to set the sideEffects value correctly.

Limitations of sideEffects

The sideEffects configuration is file-based. Once you configure a file to have side effects, even if you only use the part of the file that does not have side effects, the side effects will still be retained.

For example, modify b.js to

Object.defineProperty(Array.prototype, 'sum', {
   value: function() {
       return this.reduce((sum, num) =sum += num, 0);
   }
})
export function b() {
   console.log([1, 2, 3, 4].sum());
}
export function c() {
   console.log('ccccccccccccccccccc');
}

In app.js, only the c method is imported, the b method will be tree-shaken, but the sum method will not be.

Epilogue

sideEffects has a significant impact on the webpack build process, especially for npm modules. It is particularly important to pay attention to the correctness of the declaration when using it.

How to Build Component Libraries

Mark — Tue, 04 Jun 2024 09:00:37 +0000

Everyone has used component libraries. Popular React component libraries include Alibaba's Ant Design, ByteDance's Semi Design, Arco Design, and so on. But how are these component libraries packaged? If we want to create our own component library, how would we write the packaging logic? In this article, we will explore these questions.

Create a new project.



mkdir component-lib-test
cd component-lib-test
npm init -y

Install Ant Design, Arco Design, and Semi Design.



pnpm install antd
pnpm install @douyinfe/semi-ui
pnpm install @arco-design/web-react

npm and yarn will flatten all dependencies, which can look quite messy. But pnpm won't, making the node_modules directory clean.

Firstly, let's take a look at Ant Design, which is divided into three directories: lib, es, and dist.

Let's take a look at the component code in these three directories.

The components in the lib directory are in commonjs format:

The components in the es directory are in ES module format:

The components in the dist directory are in UMD format:

Then, the entry points for commonjs, esm, umd, and types are declared in the package.json:

In this way, when you use 'require' to import, you are importing components from the 'lib' directory, and when you use 'import', you are importing components from the 'es' directory. And if you directly import using a script tag, you are importing components from the 'unpkg' directory.

Let's take a look at 'semi-design':

It is the same.

The only difference is the addition of a 'css' directory. Antd does not have this directory because it has switched to a CSS-in-JS solution, eliminating the need to import CSS files separately.

Next, let's look at 'arco-design':

It is the same too.

It also has three directories: 'lib', 'es', and 'dist'. The entry points for 'esm', 'commonjs', and 'umd' are declared as well.

In other words, component libraries are all like this. They separately package three versions of the code (esm, commonjs, umd), and then declare the entry points for different module specifications in the package.json.

So, the question is, if I have an esm module, how can I build three versions of the code (esm, commonjs, umd) separately?

This question is easy to answer.

For the UMD bundle, you can just use Webpack to package it.

For ESM and CommonJS, there's no need to package them, just compile them with tsc or babel.

Let's take a look at how each of these three component libraries did.

Firstly, arco-design, Its packaging logic is under the arco-scripts of arco-cli:

Let's take a look at index.ts

There are 3 methods for building three types of code and 1 method building CSS.

Let's take a look at each one:

For the compilation of ESM and CJS, it encapsulates a compileTS method, and then passes in different types.

Inside compileTS, you can compile with tsc or babel:

Compiling with tsc involves reading the tsconfig.json in the project, and then compiling:

Babel compilation is based on built-in configurations, it modifies the product modules specification, and then compiles:

The babelConfig is configured for TypeScript and JSX compilation:

Next is UMD, As we said, it indeed uses webpack for packaging:

In the webpack configuration, you can see that it is indeed prepared for unpkg, using ts-loader and babel-loader:

And for the CSS part, it uses Less for compilation:

Gulp is used to organize compilation tasks, allowing tasks to be executed in sequence or in parallel.

Here, gulp.series is used to execute tasks in sequence, while gulp.parallel is used for parallel execution.

So, it's clear how those three types of bundle along with the CSS files are packaged:

Gulp is used here just to organize compilation tasks, it can be used or not used.

Let's take a look at semi-design now:

It doesn't have a separate xx-scripts package, it's directly under the scripts directory of semi-ui.

It also uses gulp to organize tasks.

Let's take a look at this compileLib gulp task:

Here, compileTSXForESM and ForCJS are clearly used for compiling components into two types of code, ESM and CJS, respectively.

Firstly, it uses tsc for compilation, then it uses babel:

Then for UMD, it also uses webpack:

It uses babel-loader and ts-loader:

Finally, the compilation of SCSS:

Semi-design maintains all component SCSS files under the semi-foundation directory:

So, the compilation process looks like this:

It compiles all SCSS files under the semi-foundation directory and merges them into one file.

The styles of arco-design are maintained under the component directory.

There's not much difference here, you just need to change the source directory when compiling.

This is how the esm, cjs, umd, and scss of semi-design are compiled and packaged.

Is there a big difference from the scripts of arco-design?

Not really, it's just that there is no separate package for xxx-scripts. The esm and cjs code are compiled using tsc + babel, and scss is used instead of less.

Let's take a look at ant-design:

It also separately maintains a package for compilation and packaging scripts, called @ant-design/tools.

It also has a gulpfile that defines many tasks.

For example, the compile task is compiling source code to es and cjs:

It also firstly uses tsc, then babel for compilation, and finally outputs to the es or lib directory:

Webpack is also used when packaging umd code:

The only difference is that its Webpack configuration file is read from the component library project directory, instead of being built-in like in arco-design.

This is the compilation and packaging logic of these three component libraries.

Is there a big difference?

Not really, you could even say they are almost the same.

Summary

We have analyzed the output and compilation packaging logic of the ant-design, semi-design, and arco-design component libraries.

They all have lib, es, dist directories, which contain component code in commonjs, es module, and umd formats respectively.

And they declare the three types of specifications in package.json using main, module, and unpkg.

From a product perspective, the three component libraries are quite similar.

Then we analyzed the compilation and packaging logic.

Ant-design and acro-design both have a separate package for scripts, while semi-design does not.

For compiling esm and cjs code, they all use babel and tsc for compilation, but arco-design uses either tsc or babel, while ant-design and semi-design first use tsc for compilation and then babel.

For packaging umd code, all three component libraries use webpack, but some have built-in webpack configurations, while others place them in the component library project directory.

In terms of styles, ant-design uses a css-in-js runtime solution that does not require compilation, while arco-design uses less and maintains the styles in the component directory, and semi-design uses scss and has a separate directory to store all component styles.

And the compilation tasks are all organized using gulp, which can execute tasks in series or in parallel.

Although there are some minor differences, overall, the compilation and packaging logic of these three major component libraries can be said to be almost the same.

Is it troublesome to write such scripts?

Not at all. Everyone knows how to package umd parts with webpack, and it's not difficult to compile esm and cjs with babel or tsc. As for scss and less, that's even simpler.

So, compilation and packaging is not the difficult part of a component library.

If you want to write a component library, you can also write scripts in this way.

Building a Drop-Down-List with Country-Code + Flag + Telephone

Mark — Mon, 03 Jun 2024 08:51:15 +0000

In this article I will build a React component for telephone input with country code and flag drop-down-list as prefix select.

When you click the flag part, the drop-down-list will show, and you can search country use code or country name, when you click the country item, it will change current country.

I searched on the internet to find country code and flag data, finally, I get a json file contains country data.

https://github.com/Dwarven/Phone-Country-Code-and-Flags/blob/master/Phone-Country-Code-and-Flags.bundle/phone_country_code.json

This json file will be used to build my component, but I don't like the flag image in this project, It is one png file contains all flag, you have to use CSS Sprite, but I don't know the position of the country. What I want is svg flag file of every country.

Fortunately, I found flag svg files in this project.

https://github.com/necessarylion/country-list-with-dial-code-and-flag/tree/master/assets/svg

Then I picked the json file and svg files into my project.

The first version is straight forward. You can checkout the code, and run it.

https://github.com/markliu2013/react-phone-country-code-flag/tree/v1

But there is performance problem now, you have to wait for all svg files loaded before component mount.

So I am thinking how to use lazy load technology, the svg files start to load when you click the flag icon, not before mount. and it only load about 6 svg files in the viewport area, the other svg files start to load when you scroll to show in the viewport.

You can use Intersection Observer API to implement svg file lazy load easily.

Firstly, change img src to use data-src.



<img
   className="phone-country-select-list-flag"
   data-src={`flags/${item.countryCode}.svg`}
/>

When observer load svg.



// flag icon lazy load
  const [flagLoaded, setFlagLoaded] = useState(false);
  function flagLazyLoad() {
    // should run only once.
    if (flagLoaded) return;
    const callback = (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const image = entry.target.querySelector('.phone-country-select-list-flag');
          const data_src = image.getAttribute('data-src');
          image.setAttribute('src', data_src);
          observer.unobserve(entry.target);
        }
      });
    };
    const observer = new IntersectionObserver(callback, {
      root: document.querySelector('.phone-country-select-dropdown ul')
    });
    const images = document.querySelectorAll('.phone-country-select-dropdown ul li');
    images.forEach((image) => {
      observer.observe(image);
    });
    setFlagLoaded(true);
  }

  useEffect(() => {
    if (isOpen) {
      flagLazyLoad();
    }
  }, [isOpen]);

You can checkout branch v2 for full code. https://github.com/markliu2013/react-phone-country-code-flag/tree/v2

Now we can accept the performance, but it does not work user friendly, the country flag is blank when you scroll, it have to wait seconds to load.

Let's think how to make it the better.

SVG file is actually html format, You can read svg content and put them in html page directly.



<!DOCTYPE html>
<html>
<body>

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_svg_rect_round

If we can use webpack to generate a bundle file for every SVG files, that means we can make all svg files into a bundle file, then we can read content from that bundle file, and write svg content into the page directly. If so, we can use only 1 request to load all flag data.

Firstly, create FlagSvg component.



import React, { useEffect, useState } from 'react';

const FlagSvg = ({ code }) => {
  const [data, setData] = useState('');

  useEffect(() => {
    const fetchData = async () => {
      const svgUrl = await import(`./flags/${code}.svg?raw`);
      //  const response = await fetch(svgUrl.default);
      // const content = await response.text();
      setData(svgUrl.default);
    };
    fetchData().catch(console.error);
  }, [code]);

  return (
    <div className="phone-country-select-list-flag" dangerouslySetInnerHTML={{ __html: data }} />
  );
};

export default FlagSvg;

Use it in the list.



        <ul>
          {countryList.map((item, index) => (
            <li
              key={index}
              onClick={() => itemClickHandler(item)}
              className={item.visible ? 'show' : 'hide'}
            >
              <FlagSvg code={item.countryCode} />
              <span className="phone-country-select-list-name">{item.name}</span>
              <span className="phone-country-select-list-code">{item.code}</span>
            </li>
          ))}
        </ul>

webpack config



{
  test: /\.svg/,
  type: 'asset/resource',
  generator: {
    filename: 'images/[hash][ext][query]'
  }

Check out this commit:
https://github.com/markliu2013/react-phone-country-code-flag/commit/c99ce806655055f1c4c6face6a985dc6c24bac1b

it still works well, but there is many request for flags.

Now we will try to make a bundle file for svg files.



npm install --save-dev raw-loader



// webpack.config.js
module.exports = {
  //...
  module: {
    rules: [
      //...
      {
        test: /\.svg$/,
        use: 'raw-loader',
      },
    ],
  },
  //...
};



// webpack.config.js
module.exports = {
  //...
  optimization: {
    splitChunks: {
      cacheGroups: {
        svg: {
          test: /\.svg$/,
          name: 'svg',
          chunks: 'all',
          enforce: true
        }
      }
    }
  },
  //...
};

Now there is only 1 request for all svg files.

Checkout the full code: https://github.com/markliu2013/react-phone-country-code-flag

I also created Vite3 + React + TypeScript version: https://github.com/markliu2013/react-phone-country

Forem: Mark

MVCC Concept: The No-Lock Approach for High-Concurrency Systems

1. What is MVCC

2. How MVCC Works

3. The Essence of MVCC

4. The Philosophy of MVCC

5. Insights for Developers

Conclusion

How to Contribute to Open Source Projects

Throttling and Debouncing in JavaScript

Debouncing

Definition

Example - Autocomplete Input

Unoptimized Implementation

Debounce Optimization

Throttling

Example - Scroll to The Top

Unoptimized Implementation

Throttling Optimization

Two Ways to Implement Throttling: Timestamps and Timers

Summary

My CSS Units Best Practices

Font Size

Width

Height

Padding and Margin

Media Query

Other Rules

Top 6 React Hook Mistakes Beginners Make

Mistake 1, Using state when you don't need it

Mistake 2, Not using the function version of useState

Mistake 3, State dose not update immediately

Mistake 4, Unnecessary useEffect

Mistake 5, Referential equality mistakes

Mistake 6, Not aborting fetch requests

Install and Set Up Kubernetes on Linux

Prerequisites

Set Hostname

Disable Selinux

Swap Off

Disable Firewall

Enable IPv4 packet forwarding

Install Docker

Install CRI

Installing kubeadm, kubelet and kubectl

Init Master Node

Join Node into Master

How to Read a JSON File in JavaScript

Vite - Code Splitting Strategy

The Problem Solved by Code Splitting

Vite's Default Chunk Splitting Strategy

Before version 2.9

After version 2.9

Multiple HTML Files Using Webpack

Let's Write Some Code

Configuring Multiple Entries

Configuring html-webpack-plugin

index.html

list.html

details.html

Configuration Optimization

Deep Dive into SideEffects Configuration

What is sideEFfects?

sideEffects Configuration

Precautions for sideEffects

Limitations of sideEffects

Epilogue

How to Build Component Libraries

Summary

Building a Drop-Down-List with Country-Code + Flag + Telephone