By default, the cart, my account, wishlist dispatchers are always imported into the main chunk. This happens because the application imports CUSTOMER constant from MyAccount.dispatcher, which in turn imports cart and wishlist dispatchers.

To remove these non-critical modules into non-critical chunks, the following actions are required:

1. Create a new build configuration plugin

Create a next extension, declare a build configuration plugin inside. It is possible to use an exiting extension too. Follow these instructions:

How to build configuration plugins?

2. Create a new place to store customer constant

Define the CUSTOMER constant used within the application in a new file: src/store/MyAccount/CustomerKey.js, like so:

export const CUSTOMER = 'customer';

3. Create a Webpack loader to remove fix imports

Create a new file rewire-dispatchers.js along the build configuration plugin, with following content:

module.exports = (rawSource) => {
  // Fix CUSTOMER import causing multiple dispatcher load
  const originalImport = `import { CUSTOMER } from 'Store/MyAccount/MyAccount.dispatcher'`;
  const newImport = `import { CUSTOMER } from 'Store/MyAccount/CustomerKey'`;
  const source = rawSource.replace(originalImport, newImport);
};

4. Register the newly created loader

To add a loader into a Webpack configuration, modify the build configuration plugin:

webpackConfig.module.rules.push({
  test: /\\.(tsx|jsx|ts|js)?$/,
  loader: require.resolve('./rewire-dispatchers'),
});

<aside> 🎉 This is how you rewire dispatchers!

</aside>