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
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 .
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
Caching and code separation have roughly the same purpose , Better run in the browser , download , Better performance .