Improving Front‑End Page Load Speed with Webpack SplitChunksPlugin and Code Splitting

For front‑end developers, page load speed is crucial, and Snowball has invested heavily in code splitting to address this.

Problem before Webpack 4 : Common practice was to bundle shared libraries such as react and react‑dom into a single vendor file that loaded together with the entry bundle. When many libraries were included, the vendor file became large; when few were included, shared code often remained un‑split.

Solution with Webpack 4 : The introduction of SplitChunksPlugin (an improvement over the old CommonsChunkPlugin) provides richer configuration options to group and split shared modules, allowing on‑demand loading and reducing first‑screen download size. Even without custom settings, the plugin follows internal rules to split code:

Modules that are shared or located in node_modules are candidates.

Modules larger than 30 KB are considered.

The maximum number of async requests per split should be ≤ 5.

The maximum number of initial requests per split should be ≤ 3.

Example 1 – Library splitting :

chunk‑a: react, react‑dom, other components

chunk‑b: react, react‑dom, other components

chunk‑c: angular, other components

chunk‑d: angular, other components

Resulting bundles:

vendors~chunk‑a~chunk‑b: react, react‑dom

vendors~chunk‑c~chunk‑d: angular

chunk‑a to chunk‑d: remaining components

Example 2 – Shared component splitting :

chunk‑a: react, react‑dom, components, shared react components

chunk‑b: react, react‑dom, angular, components

chunk‑c: react, react‑dom, angular, components, shared react components, shared angular components

chunk‑d: angular, components, shared angular components

Resulting bundles:

vendors~chunk‑a~chunk‑b~chunk‑c: react, react‑dom

vendors~chunk‑b~chunk‑c~chunk‑d: angular

commons~chunk‑a~chunk‑c: shared react components

commons~chunk‑c~chunk‑d: shared angular components

chunk‑a to chunk‑d: remaining components

The default maximum filename length is 100 characters; the delimiter ~ can be changed via automaticNameDelimiter .

Default configuration of SplitChunksPlugin includes:

chunks : scope of chunks (initial, async, or all – default all)

minSize : minimum size before compression (default 0)

minChunks : minimum number of times a module must be shared (default 1)

maxAsyncRequests : max async requests (default 1)

maxInitialRequests : max initial requests (default 1)

name : naming pattern for split files

cacheGroups : groups that inherit the above settings and add test , priority , and reuseExistingChunk

How Snowball applies it : Base modules are loaded on the first screen, while business and component modules are loaded via Dynamic Imports. After using SplitChunksPlugin, business code and shared component code are separated, cached independently, and only re‑downloaded when their hash changes, thus speeding up subsequent deployments.

Effective use of SplitChunksPlugin relies on clear module boundaries in Dynamic Imports; minimizing inter‑dependencies within shared modules further improves on‑demand loading.

After splitting, Snowball recommends using webpack-bundle-analyzer to inspect each chunk and fine‑tune the configuration.

Finally, Snowball’s engineering team is hiring Java engineers, DevOps engineers, test developers, and algorithm engineers; interested candidates can refer to the original article for details.