@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 <Suspense>.

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

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

Using in react

Method 1 - Manually To Preload Single Component Based on Dynamic

1import { dynamic } from '@route-resource-preload/react'
2
3const Image = dynamic({
4  loader: () => import('Components'),
5  loading: (props) => <>loading...</>,
6})
7
8const handleClick = () => {
9  // execute preloading
10  Image.preload()
11}
12
13export default function Main(props){
14  return <div onClick={handleClick}>
15    <Image {...props} />
16  </div>
17}

Method 2 - Manually To Preload Multiple Components

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

1const RouteResourcePreloadPlugin = require('@route-resource-preload/webpack-plugin')
2
3webpack: {
4  plugins: {
5    add: [
6      new RouteResourcePreloadPlugin({
7        // [the-preloading-flag]: ['path']
8
9        // project's components(modules)
10        modulePreloadMap: {
11          "flagA": ["../components/A"]
12        },
13
14        // module-federation's components(modules)
15        mfPreloadMap: {
16          "flagMF": ["ling_core/Components"]
17        },
18
19        // static assets (just like js/css/png/jpg/font, etc.)
20        assetPreloadMap: {
21          "flagA": ['https://domain.com/xxx.png']
22        }
23      })
24    ]
25  },
26}

2. Step 2: Create a Preloader and run

1import { Preloader } from '@route-resource-preload/react'
2
3const preloader = new Preloader()
4
5// execute preloading
6preloader.run('flagA')

Method 3 - Automatic Preloading.

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

1const RouteResourcePreloadPlugin = require('@route-resource-preload/webpack-plugin')
2
3webpack: {
4  plugins: {
5    add: [
6      new RouteResourcePreloadPlugin({
7        // [the-preloading-flag]: ['path']
8
9        // project's components(modules)
10        modulePreloadMap: {
11          "flagA": ["../components/A"]
12        },
13
14        // module-federation's components(modules)
15        mfPreloadMap: {
16          "flagMF": ["ling_core/Components"]
17        },
18
19        // static assets (just like js/css/png/jpg/font, etc.)
20        assetPreloadMap: {
21          "flagA": ['https://domain.com/xxx.png']
22        }
23      })
24    ]
25  },
26}

2. Step 2: Dynamic import component and render PreloadLink

1import { dynamic, PreloadLink } from '@route-resource-preload/react'
2
3// project's component
4const ComponentA = dynamic({
5  loader: ()=>import('../components/A'),
6  loading: () => <>loading...</>
7})
8
9// module-federation's component
10const Image = dynamic({
11  loader: ()=>import('your_lib/Components'),
12  loading: () => <>loading...</>,
13  submodule: 'Image' // may be you didn't export default, just like " export { Image, ...Others } " in js.
14})
15
16export default function Main(props){
17  return <>
18    <PreloadLink flag="flagA"  onClick={()=>{
19      navigate('/A')   // navigate comes from react-router-dom, you can custom your code.
20      }} 
21    >
22      Preload Component A
23    </PreloadLink>
24    <PreloadLink flag="flagMF">
25      {/* Link comes from react-router-dom, you can custom your code. */}
26      <Link to="flagMF" >Preload MF</Link>
27    </PreloadLink>
28  </>
29}

API

• dynamic - Split your component code and load it dynamically

1const Modal = dynamic({
2  loader: () => import('xxx/Modal'),
3  // loading: () => <>loading...</>,
4  // suspense: true,
5  // submodule: 'submodule',
6  // visible: true,
7})

Param	Description	Type	Default Value	necessary
loader	dynamic import module	() => Promise<Record<string, T extends ComponentType>>	-	✅
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 <Suspense> 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.

1function CommonLoading (props: { moduleName: string }) {
2  const { moduleName } = props
3  const [loading, setLoading] = useState(true)
4  const Com = useMemo(()=>dynamic({ loader: () => import(`${moduleName}`)}),[moduleName])
5
6  // custom loading
7  return <Spin spinning={loading}>
8    <Com onEnd={()=>{ setLoading(false)}}  />
9  </Spin>
10}
11
12<CommonLoading moduleName={moduleName} />

• Preloader - Manually to preload based on flag

1const preload = new Preloader(options)
2
3preload.run('flag') // plugin 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

1<PreloadLink  flag="flagA"  >
2  Preload Component
3</PreloadLink>

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

1new RouteResourcePreloadPlugin({
2  // [the-preloading-flag]: ['path']
3
4  // project's components(modules)
5  modulePreloadMap: {
6    "flagA": ["../components/A"]
7  },
8
9  // module-federation's components(modules)
10  mfPreloadMap: {
11    "flagMF": ["xxx/Components"]
12  },
13
14  // static assets (just like js/css/png/jpg/font, etc.)
15  assetPreloadMap: {
16    "flagA": ['https://domain.com/xxx.png']
17  }
18})

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

1{
2  "flagA": ["../components/A"],
3  // [the-preloading-flag]: ['your project's components path']
4}

• mfPreloadMap Object

1{
2  "flagMF": ["ling_core/Components"]
3  // [the-preloading-flag]: ['your module-federation's components path']
4}

• assetPreloadMap Object

1{
2  "flagA": ['https://domain.com/xxx.png']
3  // [the-preloading-flag]: ['your static assets link'] (image/font/svg/css/js/...)
4}