SplitChunksPlugin is officially advocated in webpack4. So this is mainly explained in Webpack4 through SplitChunksPlugin plug-in to achieve code segmentation method.
What is chunk and what is bundle in webpack? To help us understand this, here’s a graph:
In fact, in the webpack configuration file, utils mounts some utility functions globally, which is also a kind of code cutting, but is there a more flexible way? Let’s take a look at the SplitChunksPlugin plug-in. An introduction to SplitChunksPlugin can be found in the official WebPack documentation:
The default configuration for SplitChunksPlugin is as follows:
We’ll talk about it a little bit.
There are two scenarios of code segmentation: one is the synchronous introduction of code module segmentation, and the other is the asynchronous introduction of code module segmentation.
I. Synchronization code segmentation:
Introducing LoDash into the business code, using the webpack-bundle-Analyzer plugin described earlier to analyze the packaging as follows:
You can see that our SRC and node_modules files are all in the same bundle. If we want to package the node_module library files into a separate chunk, we can copy the default SplitChunksPlugin configuration from the official website into the package configuration file and make the following changes:
“Chunks” can be configured as “Initial”, “Async” and “all” can be configured as “static introduction”, “dynamic introduction” and “code segmentation” respectively.
MinSize indicates the minimum package size that can be split. The default size is 30,000 bytes. In packaging analysis, we can see that the package size of LoDash is nearly 70KB after webpack processing, which is larger than the minimum package size of SplitChunksPlugin. So after making the changes above, lodash can be packaged into a separate chunk. After packing, the situation is as follows:
As you can see from the figure, LoDash is packaged separately into a chunk called Vendors ~index.js.
To further refine the packaging process, we can proceed to the cacheGroups configuration once minSize is satisfied. There are different cacheGroups in which the test is the test re. Is packaged according to the rules of the current object.
Vendors is the prefix to complete the package, and the vendors~index.js is followed by the vendors~index.js entry file name index configured in the entry to this module.
If we want to customize the filename for lodash packaging, we can configure filename to vendor.js as follows:
The chunk of LoDash that completes the packet is then called vendors. Js, and the name:true above cacheGroups means that filename is valid in cacheGroups.
The rest of the configuration in splitChunks is described below:
What does minChunks mean? This means that the entry configured in the entry will reference the minimum number of modules. Only when at least minChunks reference the current module will be packaged separately.
MaxAsyncRequests specifies the maximum number of code that can be requested simultaneously after it is partitioned.
MaxInitialRequests indicates the maximum number of requests on the home page. If the number of requests on the home page is greater than this, the code split will not continue.
Ii. Asynchronous code segmentation:
Import async import async import async import async import async import async import async import async import
In the use of WebPack, webPack enriches the packaging functionality with a feature called “magic notes,” as you’ll see in more detail below.
SplitChunksPlugin in Webpack will split asynchronously imported code by default, but in order to support asynchronously imported module syntax, we need to install Babel plugin-syntax-dynamic-import to support asynchronously loaded code syntax.
Let’s take a closer look at our business code:
In index.js, we dynamically introduce the handleclick. js file through the click event, where the comment part is named handleClick by magic comment.
In the handleclick.js file, we add elements to the document (where process.env.node_env is a runtime environment variable, as seen in previous installtions).
As you can see below, when the page is refreshed, the index.html and index.js files are loaded first. When a page is clicked, the handleclick.js file is requested and “123” appears on the page.
In fact, asynchronous code splitting has a more familiar name — lazy loading.
However, if the module being loaded asynchronously is large and we request it AD hoc after the operation in the real project, it will still load slowly. To solve this problem, you can use webpackPrefetch in the magic comment to make the browser load the asynchronously split bundle when it is free after loading the js file on the home page.
Reference: segmentfault.com/q/101000000… Juejin. Cn/post / 684490… Coding.imooc.com/lesson/316….
If you are interested in this article and want to pay attention to more technical articles, please pay attention to the author’s official account, more good articles for you to present ~
