Webpack to load files as chunks and not bundle up into one-Dynamic require

[PoojaSSW]

I want to load the translation files(react-intl-yahoo lib). I want the webpack to load seperate chunks of files at the compile time instead of bundling them up into one. I tried using the require.ensure to optimize loading of locale data files:

let data= {};
  require.ensure([], function(require) {
    data = require("./languages/"+locale+".json");
  });

but I see that Webpack is loading the entire languages-folder with all the files bundled during compile time instead a separate one.
What is the best way to chunk the translation files separately and load asynchronously at the compile time?

[TheLarkInn]

If you are using webpack v2, you can use import("./languages/"+local+".json") and this should create x separate chunks for each language in a separate file.

[TheLarkInn]

Or if you are not on latest webpack 2 beta, you can use System.import("./languages/"+local+".json")

[jharris4]

I'm running into the same issue with require.ensure generating one bundle for all files in the same directory/context. It'd be nice if we had some kind of control over how/when it groups things from the same context into a giant bundle.

System.import (I assume it's the same for import) is not a workable solution for me, because it doesn't support several features that require.ensure does:

1. Named chunks (Named chunks using System.imports  #3132)
2. recursive / batched code splitting (description below):

Let's say we have 3 libraries:

• libraryA - 50 KB
• libraryB - 60 KB (but 10 KB that is not part of libraryA)
• libraryC - 70 KB (but 20 KB that is not part of libraryA)

So basically, libraryB and libraryC both require/import libraryA.

Using require.ensure, we can do the following:

require.ensure([], (require) => {
  require('libraryA');
  require.ensure([], (require) => {
    require('libraryB');
    // do something
  }, 'bundleB');
}, 'bundleA');

require.ensure([], (require) => {
  require('libraryA');
  require.ensure([], (require) => {
    require('libraryC');
    // do something
  }, 'bundleC');
}, 'bundleA');

The resulting bundles will be:

• bundleA - 50 KB
• bundleB - 10 KB
• bundleC - 20 KB

Using System.import, we can do the following:

System.import('libraryA').then(() => {
  System.import('libraryB').then(() => {
    // do something
  });
});

System.import('libraryA').then(() => {
  System.import('libraryC').then(() => {
    // do something
  });
});

The resulting bundles will be:

• bundleA - 50 KB
• bundleB - 60 KB
• bundleC - 70 KB

I know that using code splitting recursively like this is not very common, but it has been a very powerful feature to reduce bundle sizes on projects I've worked on.

I guess the named chunks are something I could live without (although you can see with examples like recursive splitting how useful they are). But I really don't want to give up the clever bundle-size reduction require.ensure gives, unless it can be replicated in System.import / import.

[webpack-bot]

This issue had no activity for at least half a year.

It's subject to automatic issue closing if there is no activity in the next 15 days.

[webpack-bot]

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.