En Webpack (v5), comencé a usar importaciones dinámicas para incluir el conjunto de íconos Twemoji:

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

Hay 3360 imágenes incluidas en esta importación dinámica.

Tengo un módulo de activos para procesarlos:

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

Ahora, el desafortunado resultado es que esto aumenta significativamente (~217 KB) el tamaño del punto de entrada de mi aplicación.

Estos datos adicionales no son los iconos en sí. Es un mapa de datos utilizado por Webpack para encontrar los archivos.

Anteriormente estaba usando CopyPlugin para lograr un resultado similar sin importaciones dinámicas, y no hizo que el punto de entrada se hinchara. Sin embargo, significa que tengo menos control sobre los activos.

Con CopyPlugin , mi configuración se veía así:

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

Y obtuve las URL de los activos como una ruta a su ubicación:

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

Así que mi pregunta es esta:

1. ¿ Por qué Webpack agrega este exceso con importaciones dinámicas? ¿Es ya tan eficiente como podría ser?
2. ¿Es esto solo una compensación que debo aceptar de hacerlo de una manera u otra?
3. ¿Hay alguna manera de tener las ventajas de las importaciones de módulos sin inflar mi paquete, o estoy atascado con CopyPlugin ?

Tenga en cuenta que ya estoy usando la división de código en mi aplicación y tengo la intención de separar los emojis en su propio fragmento. Pero incluso si estuviera en su propio fragmento, no querría 217 KB de datos innecesarios en ese fragmento.

Gracias de antemano por cualquier sugerencia o consejo.