@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

<details> <summary>Based-on-react.lazy-normal-loading-effect.gif</summary> <br />

</details> <details open> <summary>Based-on-route-resource-preload-effect.gif</summary> <br />

</details>

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 ?

• <a href="#dynamic---split-your-component-code-and-load-it-dynamically">Split modules loads as needed</a>, improving the first screen loading experience of your App.
• Minimize dynamic component loading time and providing the best user experience.
• Support <a href="#method-3---automatic-preloading">automatic the preloading of resources</a> ( JS / Component / Module-Federation / UMD / Svg / Png , Etc) and providing the best user experience.
• Support <a href="#method-1----manually-to-preload-single-component-based-on-dynamic">manually to preload</a>.
• Support typescript.
• Support <a href="#dynamic---split-your-component-code-and-load-it-dynamically">React <Suspense></a>.

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 <a href="#preloadlink---automatic-the-preloading-of-resources-based-on-flag">when to preload in more detail</a>
• Support preload <a href="#webpack-routeresourcepreloadplugin">Module-Federation</a>
• Support <a href="#webpack-routeresourcepreloadplugin">More types</a> 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

npm install @route-resource-preload/webpack-plugin @route-resource-preload/react

Using in react

Method 1 - Manually To Preload Single Component Based on Dynamic

import { dynamic } from '@route-resource-preload/react'

const Image = dynamic({
  loader: () => import('Components'),
  loading: (props) => <>loading...</>,
})

const handleClick = () => {
  // execute preloading
  Image.preload()
}

export default function Main(props){
  return <div onClick={handleClick}>
    <Image {...props} />
  </div>
}

Method 2 - Manually To Preload Multiple Components

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

const RouteResourcePreloadPlugin = require('@route-resource-preload/webpack-plugin')

webpack: {
  plugins: {
    add: [
      new RouteResourcePreloadPlugin({
        // [the-preloading-flag]: ['path']

        // project's components(modules)
        modulePreloadMap: {
          "flagA": ["../components/A"]
        },

        // module-federation's components(modules)
        mfPreloadMap: {
          "flagMF": ["ling_core/Components"]
        },

        // static assets (just like js/css/png/jpg/font, etc.)
        assetPreloadMap: {
          "flagA": ['https://domain.com/xxx.png']
        }
      })
    ]
  },
}

1. Step 2: Create a Preloader and run

import { Preloader } from '@route-resource-preload/react'

const preloader = new Preloader()

// execute preloading
preloader.run('flagA')

Method 3 - Automatic Preloading.

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

const RouteResourcePreloadPlugin = require('@route-resource-preload/webpack-plugin')

webpack: {
  plugins: {
    add: [
      new RouteResourcePreloadPlugin({
        // [the-preloading-flag]: ['path']

        // project's components(modules)
        modulePreloadMap: {
          "flagA": ["../components/A"]
        },

        // module-federation's components(modules)
        mfPreloadMap: {
          "flagMF": ["ling_core/Components"]
        },

        // static assets (just like js/css/png/jpg/font, etc.)
        assetPreloadMap: {
          "flagA": ['https://domain.com/xxx.png']
        }
      })
    ]
  },
}
```…