DEV Community

Yoriiis
Yoriiis

Posted on • Edited on • Originally published at Medium

The real power of Webpack 4 SplitChunks Plugin

#performance #javascript #webdev #tooling

This article was originally published on Medium and has been slightly updated for Dev.to.

Webpack — Code Splitting

If you have read Hemal Patel's excellent article about the Mysterious SplitChunks Plugin, you probably asked yourself the same question as I did.

How do I include the code splitting optimization splitChunks.chunks "all", into my project?

SplitChunks finds modules which are shared between chunks and splits them into separate chunks to reduce duplication or separate vendor modules from application modules.

SplitChunks accepts 3 possible values initial, async or all.

According to the Webpack documentation:

"Providing all can be particularly powerful, because it means that chunks can be shared even between async and non-async chunks"

Hemal Patel explains it differently:

"Hey, webpack! I don't care if it is a dynamically imported module or non-dynamically imported module. Apply optimization over all of them. But make sure that… naah, you are smart enough to do that!"

The difference between Entry Points and Chunks

Entry Points

The point(s) to enter the application. Here the application starts executing. If an array is passed all items will be executed.

A dynamically loaded module is not an entry point.

Simple rule: one entry point per HTML page. SPA: one entry point. MPA: multiple entry points (this, according to the Webpack documentation).

Example of entry points in a multiple page application

module.exports = {
  //...
  entry: {
    home: './home.js',
    about: './about.js',
    contact: './contact.js'
  }
};
Enter fullscreen mode Exit fullscreen mode

Chunks

"Chunk" is a Webpack specific term that is used internally to manage the bundling process. Webpack composes bundles out of chunks. Chunks are automatically generated by Webpack from a list of entry points.

Webpack configuration

When you include this optimization into your Webpack configuration, it must look like this:

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'all'
      name: false
    }
  }
};
Enter fullscreen mode Exit fullscreen mode

The name parameter corresponds to the name of the split chunks. Providing true will automatically generate a name based on chunks and cache group key. I strongly advise you to enable this option for debugging during development only.

Now, Webpack will automatically analyze shared code and dependencies between your files (CSS and Javascript) and will generate new chunks associated with these entry points.

The question is now:

What is the link between an entry point and its corresponding chunk(s)?

The plugin HtmlWebpackPlugin generates HTML files with entry points, but without chunks. Also, this plugin is not appropriate for a multiple page application, it requires an instantiation per entry point and this is not optimal for build performance.

After days of searching the Internet for the best solution to integrate code splitting optimization into my project, I finally decided to code my own plugin.

Install ChunksWebpackPlugin

The chunks-webpack-plugin creates HTML files to serve your Webpack bundles. It is very convenient for multiple entry points and works without configuration for basic usage. For more complex usage, there are hooks available for more flexibility.

All the documentation is available on Github and npm.

npm install --save-dev chunks-webpack-plugin
Enter fullscreen mode Exit fullscreen mode

Includes assets in your templates

Include each HTML file on the corresponding page like the example below:

<!DOCTYPE html>
<html>
  <head>
    <?php include 'home-styles.html'; ?>
  </head>
  <body>
    <?php include 'home-scripts.html'; ?>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

You are free to change many of the options including the path, the name, the language and the content of the output files. This example is in PHP, but it works with TWIG and all others languages.

Generated HTML files contain script and style tags with the ordered list of all chunks associated with the entry point plus the entry point itself.

Example of the content of the file home-styles.html:

<link rel="stylesheet" href=".styles/0.cfcccdf4f79b40e.css" />
<link rel="stylesheet" href=".styles/home.cfcccdf4f79b40e.css" />
Enter fullscreen mode Exit fullscreen mode

Example of the content of the file home-scripts.html:

<script defer src="./scripts/1.cfcccdf4f79b40e.js"></script>
<script defer src="./scripts/0.cfcccdf4f79b40e.js"></script>
<script defer src="./scripts/home.cfcccdf4f79b40e.js"></script>
Enter fullscreen mode Exit fullscreen mode

Debug with WebpackBundleAnalyzer

Use the package WebpackBundleAnalyzer to understand how your code is being split.

Webpack Bundle Analyzer report

In conclusion,

I have integrated code splitting with the plugin chunks-webpack-plugin into several projects, including the website Télé-Loisirs, and I am very pleased with the result!

Many thanks to Webpack team for the awesome documentation and to various discussions and blog posts from the community, I could not have done this without it.

Top comments (0)