Skip to content

[Feature]: Add loc to chunkGroup.origins[] OR expose import statement source/comments #7922

@abettadapur

Description

@abettadapur

What problem does this feature solve?

Context

I have a custom plugin in my codebase that generates a 'preload' manifest, which our server uses to figure out which async chunks to send with the initial page request.

Source Code

const lazyModule = import(/* routeHint: ['route1', 'route2'] */ './lazy_module')

Emitted manifest

{
 "route1": ["lazy_chunk.js"],
 "route2": ["lazy_chunk.js"]
}

The server can then read this manifest, map the current requested route to it, and immediately serve lazy_chunk.js if applicable, eliminating the additional round trip time to fetch the chunk

Webpack Plugin

The webpack plugin I have written to do this does the following:

  • Look at each async chunk group
for (const chunkGroup of compilation.chunkGroups.filter(g => !g.isInitial()) {...}
  • Look at the origins for each chunk group
    • Get the source of the importing module
    • Use the loc property on the origin object
    • Pull out the import statement associated with this origin
const moduleSource = getModuleSourceFromChunkOrigin(origin)
const moduleLines = moduleSource.split('\n')
const { start, end } = origin.loc

const importStatementLines = moduleLines.slice(start.line - 1, end.line)
  • Extract out the routeHint comment from the import statement, and save this information to the 'preload manifest'

Feature Request

RSPack does not expose loc on the origin object, thus, this approach does not work.

Is it possible to either:

  • Expose loc on the origin object
  • Expose the content of the import statement on the origin object (ex. "import(/*routeHint: []*/ './lazy_module')"
  • Expose the magic comments on the origin

OR: Is there a better way to achieve what I'm trying to do?

What does the proposed API of configuration look like?

Either:

  1. Expose loc
type Origin = {
    module: ModuleDto;
    request: string;
+   loc: { 
+        start: {
+            line: number;
+            column: number;
+        },
+        end: {
+            line: number;
+            column: number;
+        }
+  }
}
  1. Expose import statement
type Origin = {
    module: ModuleDto;
    request: string;
+   statement: string | UInt8Array | HarmonyImportDependency 
}
  1. Expose magic comments. Not sure if this belongs on origin, or perhaps chunkGroup or chunk
type Origin = {
    module: ModuleDto;
    request: string;
+   importMeta: Record<string, any>
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    featNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions