Original translation, please indicate the source when reprinting.
Original address: https://webpack.js.org/guides/code-splitting/
Code splitting is one of the many powerful features of webpack. It allows you to split your code into various bundles that you can load on demand - like when a user navigates to a matching route, or an event from the user. It allows for smaller packages and allows you to control resource loading in order of priority, which can have a significant impact on your app's load time if used correctly.
Resource partitioning for caching and parallel loading
Code splitting for third-party libraries
A typical application depends on many third-party libraries based on framework or functional requirements. Unlike an application code, the code in these libraries does not change very often.
If we keep these libraries in their own packages, separate from the application code, we can take advantage of the browser's caching mechanism to keep these files on the end user's computer for a long time.
In order to achieve this, the [hash] part of the third-party library filename must remain constant regardless of changes in the application code.
CSS segmentation
You may also want to split the style files into a separate package, separate from the application logic. This improves the cacheability of styles and allows browsers to load styles and apply code in parallel, thus preventing FOUC (flash of unstyled content/flash of unstyled content).
Split code as needed
The above resource segmentation requires the user to specify the segmentation point in the configuration file in advance, and can also establish a dynamic segmentation point in the application code.
This can be used for smaller chunks of code, for example, for routing per application, or for predicting user action behavior. This allows users to load non-essential resources on demand.