Webpack-import-chunks-manifest NPM

webpack-import-chunks-manifest

Motivation

Sometimes webpack magic comments /* webpackPrefetch: true *//* webpackPreload: true */ are not enough for prefetching/preloading when you have independent applications (like module federated apps), also you can not start preloading/prefetching until its executed.

Its difficult to know exactly what are the JS chunks that belongs to concrete parts of that application, especially dynamic imported chunks.

This basic plugin is just to create a json file mapping that imports with its specific javascript chunks, which will allow us to:

Preload/Prefetch from different apps (like host or other remote app in Module federation)
In consequence of the previous: avoid sequential downloading of independent apps. Ex: Host --> remoteApp --> dynamic import part of remote app could be parallel with preloading/prefetching

Install

Using npm:

npm install webpack-import-chunks-manifest --save-dev

Usage

Create a webpack.config.js file:

const ImportChunksManifestPlugin = require('webpack-import-chunks-manifest');
const options = { ... };

module.exports = {
	entry: [ 'index.js'	],
  ...
  plugins: [
    new ImportChunksManifestPlugin()
  ]
};

the example above will create a importChunks.json file in the output directory for the build. The manifest file will contain a map of source webpackChunkNames to the corresponding build output files. e.g.

Having a dynamic import with webpackChunkName in the source code like:

import(/* webpackChunkName: "moduleB" */ `./moduleB`).then((module) => {
  console.log({ module });
});

It will create a manifest with the entry in the "imports" section with the corresponding chunks

{
  "entrypoints": { "main": ["main.7a3e764bdc69bccaf15a.js"] },
  "imports": {
    "main": ["main.7a3e764bdc69bccaf15a.js"],
    "moduleB": ["moduleB.7a3a172b0b71d0c4c5b9.js"]
  }
}