Separate code files
Before this, you must first know the difference between filename and chunkFilename in the frequently configured output; simply put, the entry file defined in the entry is filename configuration item, and the entry file is usually introduced inside the entry file is chunk, and the chunkFilename configuration is chunk.
So many times, separating code files is to separate different chunks, which is conducive to browser caching in the production environment and speed up the secondary access speed.
When the code is separated, the splitChunks configured in optimization is async by default, which separates the asynchronous code by default; so in general, asynchronous import can be used asynchronously; combined with prefetching and preloading, it can produce good results.
The difference between filename and chunkFilename
output: {
filename: '[name].js',
chunkFilename: '[name].'
}
Give an example
If the entry file is
Then the file generated after packaging is
If other modules are introduced, such as lodash, a file named
After understanding the basic concepts, we will start to separate the js and css files:
js code separation
The first thing to consider when separating js code is the separation of asynchronous code. Use dynamicImport here
dynamicImport
You can use magic comment to modify the chunkname exported by dynamic import. The syntax rules are as follows:
import('/* webpackChunkName: "lodash" */' 'lodash').then(//...)
If you need to use this annotation writing method, you should install the module @babel/plugin-syntax-dynamic-import and introduce this plug-in in babelrc. The usage method is very simple. I won’t say much about it here.
splitChunks
The relevant configuration parameters of splitChunk
It is recommended to explicitly configure the public third-party class library as a public part, rather than to judge and handle it yourself.
- chunks: represents the range of display blocks, with three optional values: initial (initial block), async (load blocks on demand), all (all blocks), default is all;
- minSize: Indicates the minimum module size before compression, default is 0;
- minChunks: Indicates the number of cited times, default is 1;
- maxAsyncRequests: The maximum number of on-demand (asynchronous) loads, default is 1;
- maxInitialRequests: The maximum number of initialization loads, default is 1;
- name: The name of the split block (Chunk Names), which is automatically generated by the block name and hash value by default;
- cacheGroups: cache group.
There are several other parameters in the cache group:
- priority: Indicates the priority of the cache;
- test: The rules for cache groups, indicating that those that meet the conditions are put into the current cache group. The values can be function, boolean, string, and RegExp, and the default is empty;
- reuseExistingChunk: means that existing blocks can be used, that is, if the block that meets the condition already exists, the existing block will be used and no new block will be created.
webpack4——SplitChunksPlugin User Guide
= {
entry: {
vendor: ["react", "lodash", "angular", ...], // Specify a publicly used third-party library },
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
chunks: "initial",
test: "vendor",
name: "vendor", // Use the vendor entrance as a public part enforce: true,
},
},
},
},
// ... Other configurations}
or:
optimization: {
splitChunks: {
name: true, // Automatically process file names chunks: 'all',
minChunks: 1, // Package is required if you import at least 1 time automaticNameDelimiter: '-',
cacheGroups: {
vendors: {
test: /axios|lodash/, // Extract and package these two third-party modules separately chunks: 'initial',
}
}
}
},
optimization-splitchunks
chunks configuration
Note ⚠️
If it is dynamic import, import('/* webpackChunkName: "lodash" */' 'lodash').then() Then splitChunks is set to async and code separation will work.
If it is loading synchronously, import _ from 'lodash', then splitChunks is set to async and will not work. If it is set to all, then cacheGroups are also required
cacheGroups configuration
The configuration of the vendors cache group can detect whether the third-party module is in node_modules. If it exists, the splitChunks will take effect and will be separated into vendors~... such a file
The configuration filename will be packaged into a file named [filename]
The role of runtimeChunk
This runtimeChunk is actually the manifest that links the relationship between business logic and third-party class libraries. It needs to be extracted, otherwise using contenthash may cause inconsistency in multiple packages of contenthash when the module content has not changed (in fact, the manifest in the business logic and module has changed)
// The v4 version of webpack does not require configuration, but it is best to extract it toooptimization: {
runtimeChunk: {
name: 'runtime'
}
}
reuseExistingChunk:
If a module a uses b, the b uses a again; a is packaged into , when b is packaged, the already packaged a will be used directly; this is what reuseExistingChunk does:
default: {
reuseExistingChunk: true,
filename: ''
}
It means that as long as one of the modules uses import $ from 'jquery', the $ variable can be used directly in other files. webpack will automatically import the module during the packaging process.
css code separation
css part of the separation code file. Just use extract-text-webpack-plugin directly
A JS file. Although only one JS file is required to load the page, once the code changes, the user needs to reload a new JS file when accessing a new page. In some cases, we just modify the style separately, so that we have to reload the JS file of the entire application, which is quite unprofitable.
Multiple components share some styles. If separated, the second page will have a cache of CSS files, and the access speed will naturally be faster.
MiniCssExtractPlugin
New version of webpack use this plugin
Note that when introducing the style file import './', if treeshaking is configured, it should be configured in:
"sideEffects": [ "*.css" ]
⚠️ Note that if there is a style tag in vue, you also need to add *.vue configuration items to sideEffects. Don't worry about the script part in vue being treeShaking.
Plugin related configuration
filename refers to if the css file will be inserted directly into the html, then the filename configuration is
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[name].'
})
]
Since there is separation, there is merge. Let me mention css code merge here
If you have multiple entrances and want to package all the style files introduced by multiple entrances into one place, you can use splitChunks of the optimization configuration item, so this configuration item is not only used for js, but also for css:
optimization: {
splitChuns: {
cacheGroups: {
styles: {
name: 'style', // Merge and package all style files in multiple entry files test: /\.css$/,
chunks: 'all',
enforce: true
}
}
}
}
The css code is packaged separately according to the entry
You can also package the css file separately according to the entrance. The document has been explained in detail. This part is relatively simple and you can directly click the document./plugins/mini-css-extract-plugin
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.