diff --git a/.changeset/chilly-ravens-smile.md b/.changeset/chilly-ravens-smile.md index 9f201e2b62..fe63e46a17 100644 --- a/.changeset/chilly-ravens-smile.md +++ b/.changeset/chilly-ravens-smile.md @@ -11,8 +11,6 @@ import { ExternalsLoadingPlugin } from '@lynx-js/externals-loading-webpack-plugi export default { plugins: [ new ExternalsLoadingPlugin({ - mainThreadChunks: ['index__main-thread'], - backgroundChunks: ['index'], mainThreadLayer: 'main-thread', backgroundLayer: 'background', externals: { diff --git a/.changeset/forty-groups-drum.md b/.changeset/forty-groups-drum.md new file mode 100644 index 0000000000..853d812bb3 --- /dev/null +++ b/.changeset/forty-groups-drum.md @@ -0,0 +1,3 @@ +--- + +--- diff --git a/examples/react-externals/lynx.config.js b/examples/react-externals/lynx.config.js index 98efc148f1..743f998042 100644 --- a/examples/react-externals/lynx.config.js +++ b/examples/react-externals/lynx.config.js @@ -11,8 +11,6 @@ export default defineConfig({ rspack: { plugins: [ new ExternalsLoadingPlugin({ - mainThreadChunks: ['main__main-thread'], - backgroundChunks: ['main'], mainThreadLayer: LAYERS.MAIN_THREAD, backgroundLayer: LAYERS.BACKGROUND, externals: { diff --git a/packages/webpack/externals-loading-webpack-plugin/etc/externals-loading-webpack-plugin.api.md b/packages/webpack/externals-loading-webpack-plugin/etc/externals-loading-webpack-plugin.api.md index 05bf339102..fdb1af9183 100644 --- a/packages/webpack/externals-loading-webpack-plugin/etc/externals-loading-webpack-plugin.api.md +++ b/packages/webpack/externals-loading-webpack-plugin/etc/externals-loading-webpack-plugin.api.md @@ -15,7 +15,6 @@ export class ExternalsLoadingPlugin { // @public export interface ExternalsLoadingPluginOptions { - backgroundChunks: string[]; backgroundLayer: string; externals: Record; - mainThreadChunks: string[]; mainThreadLayer: string; } diff --git a/packages/webpack/externals-loading-webpack-plugin/src/index.ts b/packages/webpack/externals-loading-webpack-plugin/src/index.ts index 9f4d635bf7..d4887f358a 100644 --- a/packages/webpack/externals-loading-webpack-plugin/src/index.ts +++ b/packages/webpack/externals-loading-webpack-plugin/src/index.ts @@ -24,16 +24,6 @@ import type { * @public */ export interface ExternalsLoadingPluginOptions { - /** - * The chunk names to be considered as main thread chunks. - */ - mainThreadChunks: string[]; - - /** - * The chunk names to be considered as background chunks. - */ - backgroundChunks: string[]; - /** * The name of the main thread layer. */ @@ -264,39 +254,19 @@ export class ExternalsLoadingPlugin { const externalsLoadingPluginOptions = this.options; class ExternalsLoadingRuntimeModule extends RuntimeModule { - constructor() { + constructor(private options: { layer: string }) { super('externals-loading-runtime'); } override generate() { - if (!this.chunk?.name) { + if (!this.chunk?.name || !externalsLoadingPluginOptions.externals) { return ''; } - if (!externalsLoadingPluginOptions.externals) { - return ''; - } - - if ( - externalsLoadingPluginOptions.backgroundChunks.some(name => - name === this.chunk!.name - ) - ) { - return this.#genFetchAndLoadCode('background'); - } - - if ( - externalsLoadingPluginOptions.mainThreadChunks.some(name => - name === this.chunk!.name - ) - ) { - return this.#genFetchAndLoadCode('mainThread'); - } - - return ''; + return this.#genExternalsLoadingCode(this.options.layer); } - #genFetchAndLoadCode( - layer: 'background' | 'mainThread', + #genExternalsLoadingCode( + chunkLayer: string, ): string { const fetchCode: string[] = []; const asyncLoadCode: string[] = []; @@ -306,6 +276,16 @@ export class ExternalsLoadingPlugin { string | string[], ExternalsLoadingPluginOptions['externals'][string] >(); + let layer: 'background' | 'mainThread'; + if (chunkLayer === externalsLoadingPluginOptions.backgroundLayer) { + layer = 'background'; + } else if ( + chunkLayer === externalsLoadingPluginOptions.mainThreadLayer + ) { + layer = 'mainThread'; + } else { + return ''; + } for ( const [pkgName, external] of Object.entries( externalsLoadingPluginOptions.externals, @@ -430,9 +410,23 @@ function createLoadExternalSync(handler, sectionPath, timeout) { compilation => { compilation.hooks.additionalTreeRuntimeRequirements .tap(ExternalsLoadingRuntimeModule.name, (chunk) => { + const modules = compilation.chunkGraph.getChunkModulesIterable( + chunk, + ); + let layer: string | undefined; + for (const module of modules) { + if (module.layer) { + layer = module.layer; + break; + } + } + if (!layer) { + // Skip chunks without a layer + return; + } compilation.addRuntimeModule( chunk, - new ExternalsLoadingRuntimeModule(), + new ExternalsLoadingRuntimeModule({ layer }), ); }); }, diff --git a/packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/async/rspack.config.js b/packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/async/rspack.config.js index 631b857106..76f250aaea 100644 --- a/packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/async/rspack.config.js +++ b/packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/async/rspack.config.js @@ -5,8 +5,6 @@ export default { context: __dirname, ...createConfig( { - backgroundChunks: ['main:background'], - mainThreadChunks: ['main:main-thread'], backgroundLayer: 'background', mainThreadLayer: 'main-thread', externals: { diff --git a/packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/filter-duplicate-externals/rspack.config.js b/packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/filter-duplicate-externals/rspack.config.js index b2fbd4c765..105e33c24b 100644 --- a/packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/filter-duplicate-externals/rspack.config.js +++ b/packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/filter-duplicate-externals/rspack.config.js @@ -5,8 +5,6 @@ export default { context: __dirname, ...createConfig( { - backgroundChunks: ['main:background'], - mainThreadChunks: ['main:main-thread'], backgroundLayer: 'background', mainThreadLayer: 'main-thread', externals: { diff --git a/packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/not-overrides-existed-externals/rspack.config.js b/packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/not-overrides-existed-externals/rspack.config.js index 6cee3becfd..2b52fe4440 100644 --- a/packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/not-overrides-existed-externals/rspack.config.js +++ b/packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/not-overrides-existed-externals/rspack.config.js @@ -5,8 +5,6 @@ export default { context: __dirname, ...createConfig( { - backgroundChunks: ['main:background'], - mainThreadChunks: ['main:main-thread'], backgroundLayer: 'background', mainThreadLayer: 'main-thread', externals: { diff --git a/packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/only-background-externals/rspack.config.js b/packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/only-background-externals/rspack.config.js index dee1adf70c..33dd101724 100644 --- a/packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/only-background-externals/rspack.config.js +++ b/packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/only-background-externals/rspack.config.js @@ -5,8 +5,6 @@ export default { context: __dirname, ...createConfig( { - backgroundChunks: ['main:background'], - mainThreadChunks: ['main:main-thread'], backgroundLayer: 'background', mainThreadLayer: 'main-thread', externals: { diff --git a/packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/only-main-thread-externals/rspack.config.js b/packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/only-main-thread-externals/rspack.config.js index ab4d27db75..19521b09f7 100644 --- a/packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/only-main-thread-externals/rspack.config.js +++ b/packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/only-main-thread-externals/rspack.config.js @@ -5,8 +5,6 @@ export default { context: __dirname, ...createConfig( { - backgroundChunks: ['main:background'], - mainThreadChunks: ['main:main-thread'], backgroundLayer: 'background', mainThreadLayer: 'main-thread', externals: { diff --git a/packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/sync/rspack.config.js b/packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/sync/rspack.config.js index 3ec8fd9f82..608106666c 100644 --- a/packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/sync/rspack.config.js +++ b/packages/webpack/externals-loading-webpack-plugin/test/cases/externals-loading/sync/rspack.config.js @@ -5,8 +5,6 @@ export default { context: __dirname, ...createConfig( { - backgroundChunks: ['main:background'], - mainThreadChunks: ['main:main-thread'], backgroundLayer: 'background', mainThreadLayer: 'main-thread', externals: {