Méthode de débogage pour le fractionnement du code du webpack à l'aide de React.lazy

Question

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' ;
...</pré>
<p>Ce que je veux, c'est :</p>
<ul>
<li>vendors.chunk.js:react</li>
<li>main.chunk.js:index.js</li>
<li>main-1.chunk.js：component.js</li>
<li>library-0.chunk.js:library/utils</li>
<li>library-1.chunk.js:library/component</li>
<li>index.html : main.chunk.js, library-0.chunk.js, sellers.chunk.js</li>
<li>Blocs asynchrones : main-1.chunk.js, library-1.chunk.js</li>
</ul>
<p>Ce que j'obtiens est : </p>
<ul>
<li>vendors.chunk.js:react</li>
<li>main.chunk.js:index.js + composant.js</li>
<li>library.chunk.js:library/utils + library/component</li>
<li>index.html : main.chunk.js, library.chunk.js, sellers.chunk.js</li>
<li>Blocs asynchrones : aucun</li>
</ul>
<p>En conséquence, le chargement initial de ma page nécessite le chargement de tout le JS, ce qui entraîne de mauvaises performances. </p>
<p>Comment forcer Webpack à diviser la <code>library</code> en plusieurs morceaux afin de pouvoir profiter des morceaux asynchrones ? Mieux encore, comment déboguer un problème comme celui-ci ? </p>
<p>Ma configuration est à peu près la suivante :</p>
<pre class="brush:php;toolbar:false;">splitChunks : {
    morceaux : 'tous',
    Groupes de cache : {
        bibliothèque: {
            test : /[\/]bibliothèque[\/]/,
        },
    },
}

Answer 1

Le problème est l'inclusion inattendue de babel-plugin-dynamic-import-node, qui convertit les importations dynamiques (utilisées pour le chargement asynchrone) en exigences régulières dans l'environnement de nœud, empêchant la génération de blocs asynchrones. La solution est de le supprimer (ou de l'inclure uniquement lors de l'exécution de tests unitaires).