< Back to articles
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:

/**
* 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.

/**
* 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.


Other Posts
September, 21st 2020 Managing Line-breaks in Web Typography The Problem Good typography and copy requires a line-break management. Especially when the project you're working on is a multilingual website of 11 languages. But even in the world of different viewp..
March, 20th 2018 Using mobile hotspot with mobile operator that restricts tethering Time-to-live The main method for mobile operator to check if your are using other devices through mobile hotspot is TTL value of network packet. Every network packet has a number TTL (time-to-live) va..