@route-resource-preload/webpack-plugin weekly downloads statistics

@route-resource-preload/webpack-plugin - Any code can be split

🚀 Focus on improving the first screen loading speed of applications and providing the best user experience, inspiration comes from the preloading of NextJS.

中文文档

Comparison

Based-on-react.lazy-normal-loading-effect.gif

Based-on-route-resource-preload-effect.gif

As we can see from the gif, the display time of the loading component is greatly reduced by route-resource-preload relative to react.lazy.

Why do you need route-resource-preload ?

• Split modules loads as needed, improving the first screen loading experience of your App. • Minimize dynamic component loading time and providing the best user experience. • Support automatic the preloading of resources ( JS / Component / Module-Federation / UMD / Svg / Png , Etc) and providing the best user experience. • Support manually to preload. • Support typescript. • Support React .

Why route-resoure-preload over react.lazy?

route-resource-preload support code splitting of components, and support automatic preloading and manual preloading of components to avoid poor component interaction experience due to component rendering delays.

Why route-resource-preload over webpack-prefetch/preload and loadable-components-prefetch/preload?

• Control when to preload in more detail • Support preload Module-Federation • Support More types of resource (image/font/svg/css/js/...)

Online Demo Test

Component | Normal Lazy Load(ms) | Preload (ms)

Simple Component (one-resource) | 150 | 1 Complex Component (six-resource) | 350 | 10

It can be seen from the table that preloading significantly improves the loading speed of components, especially for complex components, the improvement of loading speed is more obvious. This shows that in complex business scenarios, preloading can significantly improve component loading speed and user experience.

React Demo Source

Install

Using in react

Method 1 - Manually To Preload Single Component Based on Dynamic

Method 2 - Manually To Preload Multiple Components

1. Step 1: First, you need add plugin in your build config.

2. Step 2: Create a Preloader and run

Method 3 - Automatic Preloading.

1. Step 1: First, you need add plugin in your build config.

2. Step 2: Dynamic import component and render PreloadLink

API

• #### dynamic - Split your component code and load it dynamically

Param | Description | Type | Default Value | necessary

loader | dynamic import module | () => Promise>>| - | ✅ loading | A spinner for displaying loading state | ComponentType | - | ❌ submodule | maybe you didn't export default, you need it | string | - | ❌ visible | whether to render immediately after the components in the view are preloaded | boolean | true | ❌ suspense | use react for displaying loading state | boolean | - | ❌

dynamic will return a HOC with onEnd prop, which will call back after the component is dynamically rendered to adapt to complex and changeable business scenarios, such as custom loading package elements/or computing component rendering time-consuming, etc.

• #### Preloader - Manually to preload based on flag

Param | Description | Type | Default Value | necessary

publicPath | yout server publicPath | string | - | ❌

Preloader's publicPath is the same as RouteResourcePreloadPlugin's publicPath

• #### PreloadLink - Automatic the preloading of resources based on flag

Props | Description | Type | Default Value | necessary

flag | the preloading flag | string | - | ✅ children | children ReactNode | ReactNode | - | ✅ action | trigger preload action | string (init / inview / hover) | hover | ❌ onClick | PreloadLink click event | () => void | - | ❌ className | PreloadLink classname | string | - | ❌ publicPath | yout server publicPath | string | - | ❌

PreloadLink's publicPath is the same as RouteResourcePreloadPlugin's publicPath

Plugin

• #### Webpack-RouteResourcePreloadPlugin RouteResourcePreloadPlugin's publicPath is the same as PreloadLink's publicPath

Params | Description | Type | Default Value | necessary

modulePreloadMap | project's components(modules) | modulePreloadMap Object | - | ❌ mfPreloadMap | module-federation's components(modules) | mfPreloadMap Object | - | ❌ assetPreloadMap | static assets | assetPreloadMap Object | - | ❌ publicPath | your server publicPath | string | - | ❌

Others

• #### init / inview / hover value | Description

init | Trigger preload after PreloadLink rendering inview | Trigger preload after PreloadLink in the view hover | Trigger preload after your mouse hover in the PreloadLink

• #### modulePreloadMap Object • #### mfPreloadMap Object • #### assetPreloadMap Object