Menu
How can a web developer tell if a web app at a given URL is using code splitting, such as that provided by webpack, rollup or other libraries?
532
Code splitting is the splitting of code into various bundles or components which can then be loaded on demand or in parallel. As an application grows in complexity or is maintained, CSS and JavaScripts files or bundles grow in byte size, especially as the number and size of included third-party libraries increases.
Code splitting is a way to split up your code from a large file into smaller code bundles. These can then be requested on demand or in parallel.
Code splitting is one of the most compelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel.
If using Google Chrome, you can take a look at the network tab of the developer tools.
If the application uses webpack code splitting, typically multiple JavaScript bundles are loaded, with hash codes for cache-busting added.
In the example below, there is a main JavaScript bundle postList.blabla243fe.js. This is loaded on page load. While the code is executed, another bundle 0.8a3dblabla.js is loaded asynchronously.
186
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
