Guide
Practice
Configuration
Plugins
Showcase
Blog
Guide
Practice
Configuration
Plugins
Showcase
Blog

Auto Preload Plugin

Helps auto preload assets when load remote.

Install

This Runtime Plugin is Provided by the @module-federation/auto-preload package

npm
yarn
pnpm
bun
npm add @module-federation/auto-preload --save

Usage

The runtime plugin can be applied at compile-time or runtime

Rspack
Webpack
Module Federation Runtime
rspack.config.js
const {ModuleFederationPlugin} = require('@module-federation/enhanced/rspack');

new ModuleFederationPlugin({
  // other options
  runtimePlugins: [
    require.resolve('@module-federation/auto-preload')
  ]
});

Params

  • Type: Partial<PreloadConfig>
  • Default value: undefined
  • Description: Control the preload behavior

The configuration is the same as preloadRemote .

Example:

app.tsx
import { init } from '@module-federation/runtime';
import autoPreloadPlugin from '@module-federation/auto-preload';
init({
  name: '@demo/app-main',
  remotes: [
    {
      name: '@demo/app2',
      entry: 'http: //localhost:3006/mf-manifest.json',
      alias: 'app2',
    },
  ],
  plugins: [autoPreloadPlugin({
    // 默认值会通过 script 来预加载 js 文件，可通过 useLinkPreload: true 来修改此行为
    useLinkPreload: false
  })],
});
ON THIS PAGE