The RFC of Runtime Architecture

[underfin]

• Feature Name: Runtime Architecture
• Start Date: 2022-10-7
• Rspack Issue: runtimeModule shaking #212

Summary

1. The implementation of webpack runtime
2. The drawbacks of the current implementation of rspack runtime
3. The plan which implements the new rspack runtime.

Motivation

Ensure the rspack runtime architecture is consistent with webpack.

Prior Art

Webpack Runtime

Glossary

• RuntimeGlobals

The expression that provides the module interop or chunk loading and more webpack features.

Please see here to read more.

• RuntimeModule

The RuntimeGlobals is correspondence with one RuntimeModule. It will generate code at the render chunk.

• RuntimeRequirements

The set of RuntimeGlobals, it divided into ModuleRuntimeRequirements ChunkRuntimeRequirements, and TreeRuntimeRequirements.

The ModuleRuntimeRequirements is RuntimeGlobals for module runtime, eg __webpack_require__.

The ChunkRuntimeRequirements is RuntimeGlobals for chunk runtime, eg __webpack_require__.l is used load chunk.

The TreeRuntimeRequirements is extract ChunkRuntimeRequirements to Runtime Chunk.

The webpack provides some hooks to add RuntimeRequirements, eg The HotModuleReplacementPlugin will add HotModuleReplacementRuntimeModule and the depend RuntimeGlobals.

• Runtime Chunk

Turn on runtime and dependOn options will generate an extra Runtime Chunk which only has runtime code, else the runtime code will inlined entry chunk or async chunk, see here.

The logic of render the normal chunk is different from runtime chunk, see here. The normal chunk is only rendered modules inside the chunk, but the runtime chunk is extra rendered RuntimeModule.

• RuntimeSpec

The name of Runtime Chunk, is generated from the runtime and dependOn options. One chunk or module maybe be long as multiply runtime chunk.

Guide-level explanation

1. EntryDescription

Setting dependOn means the entry points that the current entry point depends on. They must be loaded before this entry point is loaded.

module.exports = {
  entry: {
    a2: 'dependingfile.js',
    b2: {
      dependOn: 'a2',
      import: './src/app.js',
    },
  },
};

Setting runtime means the name of the runtime chunk. When set, a new runtime chunk will be created. It can be set to false to avoid a new runtime chunk since webpack 5.43.0.

module.exports = {
  entry: {
    a1: './a',
    b1: {
      runtime: 'a1',
      import: './b',
    },
  },
};

see doc.

2. Setting optimization.runtimeChunk to true or 'multiple' adds an additional chunk containing only the runtime to each entrypoint, The value 'single' instead creates a runtime file to be shared for all generated chunks. see doc.

module.exports = {
  optimization: {
    runtimeChunk: {
      name: 'runtime',
    },
  },
};

Reference-level explanation

Current Implementation

• some runtime is inlined by default because the RuntimeGlobals isn't implemented, eg _interop_require and _export_star helpers.

• the webpack runtime hooks are not implemented, some plugins depend on it, eg HotModuleReplacementPlugin.

• The implementation of runtime chunk generate isn't respect runtime and dependOn option, see here. It must generate one runtime file for all entries and also can't be smaller.

• The analyzer excludes runtime.js because the RuntimeModule isn't implemented.

• some runtime isn't consistent with webpack.

The new architecture

The architecture is the same as webpack, it is divided into some parts to implement it.

1. Add module RuntimeGlobals to CodeGenerationResults RuntimeRequirements, eg _interop_require.
2. Implement the processRuntimeRequirements hooks to add RuntimeGlobals for RuntimeRequirements.
3. Implement RuntimePlugin tap hooks to add RuntimeModule.
4. Refactor the logic of generating chunk.

• Turn on runtime and dependOn options to generate single runtime chunk for entrypoint.
• Else it will use entry chunk as runtime chunk.

5. Implement optimization.runtimeChunk to mutate EntryDescription.
6. Ensure the runtime code is ported from webpack.