Disable dynamic import code splitting

[bpceee]

Code splitting for dynamic import is great. However, incremental build spend much more time if there are too many chunks to split. So it would be perfect if we use eager mode for development and lazy mode for production.

Bad news: right now, you can only set webpackMode per import expression like this:

import(
  /* webpackMode: "lazy" */
  'module'
);

First try:

if (process.env.NODE_ENV === 'production') {
  import(
    /* webpackMode: "lazy" */
    'module'
  );
} else {
  import(
    /* webpackMode: "eager" */
    'module'
  );
}

Turn out, this just getting worse. Clearly the bundler doesn't respect process.env.NODE_ENV here.

Workaround:
Using NormalModuleReplacementPlugin to load different file in different env.

new webpack.NormalModuleReplacementPlugin(/\.\/lazy-load-import$/, function(resource) {
  resource.request = resource.request.replace(/lazy/, 'eager');
})

Then put different logic in lazy-load-import.js and eager-load-import.js