Tengo un fragmento que estoy nombrando en una importación dinámica de la siguiente manera:

 const FileAttachments = React.lazy(() => import( /* webpackPrefetch: true */ /* webpackMode: "lazy" */ /* webpackChunkName: "file-icons" */ "Widgets/FileAttachments"));

Esta es una porción grande y está bien si toma un tiempo para cargar (rara vez se usa y tiene un respaldo perfectamente sensato) y de manera similar para los íconos sociales. ¿Cómo especifico la prioridad y anulo el tamaño máximo predeterminado que configuré en la configuración del paquete web? Intenté agregar esto

 cacheGroups: { 'file-icons': { maxSize: Infinity, priority: -100, }, 'social-icons': { maxSize: Infinity, priority: -70, }, }

Pero eso en realidad hizo que ya no tuviera un trozo con el nombre de iconos de archivos. Tal vez eso era de esperar porque se fusionó con otro fragmento, pero realmente no entiendo si lo estoy haciendo bien. ¿O tengo que usar una expresión regular para especificar un grupo de caché si quiero anular las opciones predeterminadas para un fragmento (esperaba dejar que webpack pensara y dividiera los fragmentos donde tenía sentido al mismo tiempo que disminuía la prioridad y aumentaba el tamaño máximo).

Es posible que esta pregunta ni siquiera tenga sentido porque, lo admito, no tengo un buen control sobre cómo funcionan los grupos de caché y los nombres de fragmentos y cuándo debo nombrarlos, etc., etc.