In Webpack (v5), I started using dynamic imports to include the Twemoji icon set:

require(`twemoji/assets/svg/${filename}.svg`);

There are 3,360 images included by this dynamic import.

I have an asset module to process them:

{
  test: /\.svg$/,
  type: 'asset/resource',
  include: resolve('node_modules', 'twemoji'),
  generator: {
    filename: 'packs/emoji/[name]-[contenthash:8][ext]',
  },
}

Now, the unfortunate result is that this this significantly bloats (~217 KB) the size of my application entrypoint.

This extra data isn't the icons themselves. It's a map of data used by Webpack to find the files.

I was previously using CopyPlugin to achieve a similar result without dynamic imports, and it didn't cause the entrypoint to become bloated. However, it means that I have less control over the assets.

With CopyPlugin, my configuration looked like this:

new CopyPlugin({
  patterns: [{
    from: join(__dirname, '../node_modules/twemoji/assets/svg'),
    to: join(output.path, 'emoji'),
  }],
})

And I was getting the asset URLs as a path to their location:

join(publicPath, `emoji/${filename}.svg`)

So my question is this:

1. Why does Webpack add this bloat with dynamic imports? Is it already as efficient as it could be?
2. Is this just a trade-off I have to accept of doing it one way vs the other?
3. Is there any way to have the advantages of module imports without bloating my bundle, or am I stuck with CopyPlugin?

Note that I'm already using code-splitting in my application, and I intend to separate emojis into its own chunk. But even if it were in its own chunk, I wouldn't want a whole 217 KB of unnecessary data in that chunk.

Thanks in advance for any tips or advice.