Checking if a module is already loaded in Webpack?

Question

I worked at a company that has a custom JS module bundler. The implementation has a function requireIfLoaded that allows you to require a module, but only if it has already been loaded. If the module isn't loaded yet, it throws an error. Using requireIfLoaded doesn't bundle the module. This drastically reduced our file size.

Here's an example of how it can be useful:

if (page === PROFILE) {
  // ProfileHelper should already be downloaded if we're on the profile page.
  const ProfileHelper = requireIfLoaded('ProfileHelper');
  ProfileHelper.doSomething();
} else if (page === FEED) {
  // FeedHelper should already be downloaded if we're on the feed page.
  const FeedHelper = requireIfLoaded('FeedHelper');
  FeedHelper.doSomething();
}

A separate bundle is generated for the profile page and for the feed page. require('ProfileHelper') isn't called in the feed page codepaths, so ProfileHelper isn't included in the feed bundle. require('FeedHelper') isn't called in the profile page codepaths, so FeedHelper isn't included in the profile bundle. Does Webpack have something like this?

Edit for clarification:

If I required both ProfileHelper and FeedHelper all the time, then one of the modules will be unused. At most one of them is loaded on any given page. On the profile page, ProfileHelper is loaded, but not FeedHelper . Vice-versa for the feed page.

Also, I don't want to use require.ensure because it's async.

Answer 1

Webpack will deduplicate all modules required multiple times, and modules that are already loaded will not be initialized again (following the CommonJS spec). So, basically, just require all your dependencies directly and you're set!

More importantly: don't wrap your requires if you use webpack. The static analysis to determine what modules you are actually using will stop working accurately, and webpack will bundle too much.

Answer 2

This approach is antithetical to bundling with webpack.

The require statements are the very thing that instruct webpack on what to compile. It won't ever compile your conditional requires because those will be evaluated at runtime (but webpack bundles are pre-compiled) and webpack won't have added any of them into your bundles.

What you are looking for is code-splitting: https://webpack.js.org/guides/code-splitting-require/

Tutorials:

• http://jonathancreamer.com/advanced-webpack-part-2-code-splitting/
• https://formidable.com/open-source/playbook/docs/frontend/webpack-code-splitting/