January, 16th 2018

Disabling code-splitting in Preact CLI default template

Some small and light projects do not need code splitting at all. Moreover sometimes code-splitting may lead to unwanted behavior on low speed connection or no connection at all.

Since splitting code in chunks is often used for splitting app routes that are not a part of the main app shell, without connection the page won't load if the chunk wasn't loaded and cached before. User will get old page without any changes or white screen.

That's why for some small apps I recommend disabling code-splitting. In preact-cli template it can be done by creating preact.config.js in the root of our project:

/* js */
/**
* Function that mutates original webpack config.
 * Supports asynchronous changes when promise is returned.
 *
 * @param {object} config - original webpack config.
 * @param {object} env - options passed to CLI.
 * @param {WebpackConfigHelpers} helpers - object with useful helpers when working with config.
 **/

export default (config, env, helpers) => {

};

Then, we need to use webpack LimitChunkCountPlugin. By passing configuration object we can restrict a number of dynamic chunks created on build.

/* js */
/**
* Function that mutates original webpack config.
 * Supports asynchronous changes when promise is returned.
 *
 * @param {object} config - original webpack config.
 * @param {object} env - options passed to CLI.
 * @param {WebpackConfigHelpers} helpers - object with useful helpers when working with config.
 **/

export default (config, env, helpers) => {
  config.plugins.push(
    new helpers.webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 1
    })
  );
};

In this example maxChunks restricts our build to only one bundle.js file.