RFC: Moving from Magic Comments to Import Attributes

[chenjiahan]

Summary

This RFC proposes to provide a modern API for webpack's magic comments in favor of Import Attributes for dynamic import. This change aims to align with ECMAScript standards and reduce "magic".

Motivation

Currently, Rspack uses webpack's magic comments to configure dynamic imports:

import(/* webpackChunkName: "my-chunk" */ './foo.js');

import(/* webpackPrefetch: true */ './bar.js');

import(
  /* webpackChunkName: "my-chunk" */
  /* webpackPrefetch: true */
  './foo.js'
);

This approach has several drawbacks:

• Non-standard implementation specific to webpack
• Comments can be accidentally removed or modified
• Limited IDE / tooling support
• No type checking support

Proposal

I propose adopting Import Attributes (currently Stage 4) as the standard way to configure dynamic imports:

import('./foo.js', { rspackChunkName: 'my-chunk' });

import('./bar.js', { rspackPrefetch: true });

import('./foo.js', {
  rspackChunkName: 'my-chunk',
  rspackPrefetch: true
});

Backwards Compatibility

Magic comments will continue to work for a long time as we want to maintain compatibility with webpack.

Benefits

• Aligns with ECMAScript specifications
• Better IDE support and type hints
• Easier static analysis
• More intuitive API design
• Reduced risk of accidental comment removal

Supported Attributes

The following magic comments would be mapped to Import Attributes:

Current Magic Comment	Proposed Import Attribute
webpackChunkName	rspackChunkName
webpackPrefetch	rspackPrefetch
webpackPreload	rspackPreload
webpackMode	rspackMode
webpackInclude	rspackInclude
webpackExclude	rspackExclude
webpackFetchPriority	rspackFetchPriority
webpackIgnore	rspackIgnore
webpackExports	rspackExports

Alternatives

If webpack also implements this proposal and we want to maintain interoperability, we have the following alternatives:

• Keep the webpack prefix (Looks a bit weird in Rspack)

import('./foo.js', {
  webpackChunkName: 'my-chunk',
  webpackPrefetch: true
});

• Remove the prefix (This may conflict with future standards!)

import('./foo.js', {
  chunkName: 'my-chunk',
  prefetch: true
});

[kwonoj]

Not sure if the spec allows it, but can the prefix or whole attribute name be configured by the configuration on the user end?

[chenjiahan]

I prefer to use a fixed prefix rather than a configurable one, which ensures consistency across runtime code.

[chenjiahan]

It should be possible to transform the attribute name through a transformer like Babel or SWC.