J'utilise React.lazy pour essayer de séparer du code de mon application principale, mais cela ne fonctionne pas comme prévu et j'ai du mal à comprendre comment le faire. déboguez-le.

Mon code est à peu près le suivant :

// index.js importer React depuis « react » ; importer { LibraryUtils } depuis './library/utils' ; const Component = React.lazy(() => import('./component')); ... // composant.js importer React depuis « react » ; importer LibraryComponent depuis './library/component' ; ... 
Ce que je veux, c'est :
 
 
vendors.chunk.js:react
 
main.chunk.js:index.js
 
main-1.chunk.js：component.js
 
library-0.chunk.js:library/utils
 
library-1.chunk.js:library/component
 
index.html : main.chunk.js, library-0.chunk.js, sellers.chunk.js
 
Blocs asynchrones : main-1.chunk.js, library-1.chunk.js
 
 
Ce que j'obtiens est : 
 
 
vendors.chunk.js:react
 
main.chunk.js:index.js + composant.js
 
library.chunk.js:library/utils + library/component
 
index.html : main.chunk.js, library.chunk.js, sellers.chunk.js
 
Blocs asynchrones : aucun
 
 
En conséquence, le chargement initial de ma page nécessite le chargement de tout le JS, ce qui entraîne de mauvaises performances. 
 
Comment forcer Webpack à diviser la library en plusieurs morceaux afin de pouvoir profiter des morceaux asynchrones ? Mieux encore, comment déboguer un problème comme celui-ci ? 
 
Ma configuration est à peu près la suivante :
 
splitChunks : { morceaux : 'tous', Groupes de cache : { bibliothèque: { test : /[\/]bibliothèque[\/]/, }, }, }