Ich verwende React.lazy, um zu versuchen, Code aus meiner Haupt-App aufzuteilen, aber es funktioniert nicht wie erwartet und es fällt mir schwer, herauszufinden, wie das geht Debuggen Sie es.

Mein Code sieht ungefähr wie folgt aus:

// index.js import React aus 'react'; import { LibraryUtils } aus './library/utils'; const Component = React.lazy(() => import('./component')); ... // Komponente.js import React aus 'react'; importiere LibraryComponent aus './library/component'; ...

Was ich will ist:

• 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, Vendors.chunk.js
• Asynchrone Chunks: main-1.chunk.js, Library-1.chunk.js

Was ich bekomme, ist:

• vendors.chunk.js:react
• main.chunk.js:index.js + Component.js
• library.chunk.js:library/utils +library/component
• index.html: main.chunk.js, Library.chunk.js, Vendors.chunk.js
• Asynchrone Blöcke: Keine

Aus diesem Grund muss beim ersten Laden meiner Seite das gesamte JS geladen werden, was zu einer schlechten Leistung führt.

Wie erzwinge ich, dass das Webpack die library in mehrere Blöcke aufteilt, damit ich die Vorteile asynchroner Blöcke nutzen kann? Besser noch: Wie behebe ich ein Problem wie dieses?

Meine Konfiguration sieht ungefähr wie folgt aus:

splitChunks: { chunks: 'alle', CacheGruppen: { Bibliothek: { test: /[\/]library[\/]/, }, }, }