In fact, the cache column in the document is too similar to the code separation in the previous chapter , Because the code is separated more because of browser performance and cache , Otherwise, how convenient it is to install one , There are some repetitions .

There are two main things to say

01 Then after the external reference , Compile directly

Actually sum webpack5 code separation In the same

optimization: {
splitChunks: {
chunks: 'all'
}
}
 Copy code 

Just further

optimization: {
runtimeChunk: "single",
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
},
 Copy code 

It can also extract all common modules , It's just a further determination of naming and more parameters .

02 Module identifier

Let's look at a phenomenon first

The result of my first compilation , Be careful hash value , When I modify something at will , I am here index.js Added a line of code

console.log("test");
 Copy code 

Look again hash value

another There is a change , This is very strange , I didn't add... To the document

moduleIds: 'deterministic',
 Copy code 

This function has been realized , Why is that ？？？？

I checked the configuration

webpack.docschina.org/configurati…

moduleIds Control is hash The way it was generated , Just like you encrypt , you md5 Good , still Base64 It's just in a different way , Whether the two files have changed is irrelevant .

I think maybe I understand the problem .

But now it runs successfully , In general, when generating file names, I have no problem configuring them as follows

filename: '[name].[contenthash].js'
 Copy code 

03. summary

Caching and code separation have roughly the same purpose , Better run in the browser , download , Better performance .