Debugging-Methode für die Webpack-Codeaufteilung mithilfe von React.lazy

Question

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[\/]/,
        },
    },
}

Answer 1

问题是意外包含了babel-plugin-dynamic-import-node，它将动态导入（用于异步加载）转换为节点环境中的常规require，从而阻止生成任何异步块。解决方案是删除它（或仅在运行单元测试时包含它）。