Code splitting allows the user to split code into various bundles that can then be loaded on-demand or in parallel. The developers of Webpack consider this "one of the most compelling features of Webpack" (Webpack.js.org).
Code splitting has two key advantages—the process can be used to achieve smaller bundles and to control the priority of resource loading. This can lead to an improvement in loading time.
There are three general code-splitting approaches available in Webpack 5:
- Entry points: This manually splits code using an entry point configuration.
- Prevent duplication: This approach uses SplitChunksPlugin to run a process called dedupe, which splits code into groups of modules called chunks.
- Dynamic imports: This approach uses inline functions to make calls to split code within modules.
A chunk refers to a group of modules. This is a term used by Webpack and is not frequently encountered on other platforms.
dedupe is a Python library that uses machine learning to perform matching, deduplication, and entity resolution quickly. It helps remove duplicate entries from a spreadsheet of names and addresses.
dedupe is a Python library that uses machine learning to perform matching, deduplication, and entity resolution quickly. It helps remove duplicate entries from a spreadsheet of names and addresses.
With these three approaches outlined, we can now discuss each one in detail in the following sections. Let's begin with entry points.