route-resource-preload v1.0.0-beta.11

route-resource-preload

🚀 Focus on improving the first screen loading speed of applications and providing the best user experience.

Why do you need route-resource-preload ?

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

DEMO

Install

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

Using in react

Method 1 - Manual Preloading

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

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

const handleClick = () => {
  // Manual Preloading
  Image.preload()
}

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

Method 2 - Automatic preloading by route.

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

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

webpack: {
  plugins: {
    add: [
      new RouteResourcePreloadPlugin({
        // project's components(modules), the key is route path
        modulePreloadMap: {
          "/A": ["../components/A"]
        },
        
        // module-federation's components(modules), the key is route path
        mfPreloadMap: {
          "/MF": ["ling_core/Components"]
        },
        
        // static assets (just like js/css/png/jpg/font, etc.), the key is route path
        assetsPreloadMap: {
          "/A": ['https://domain.com/xxx.png']
        }
      })
    ]
  },
}

Step 2: Dynamic import component and render PreloadLink

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

// project's component
const ComponentA = dynamic({
  loader: ()=>import('../components/A'),
  loading: () => <>loading...</>
})

// module-federation's component
const Image = dynamic({
  loader: ()=>import('your_lib/Components'),
  loading: () => <>loading...</>,
  submodule: 'Image' // may be you didn't export default, just like " export { Image, ...Others } " in js.
})

export default function Main(props){
  return <>
    <PreloadLink to="/A"  onClick={()=>{navigate('/A')}} className="App-link">
      Preload Component A
    </PreloadLink>
    <PreloadLink to="/MF" className="App-link">
      <Link to="/MF" >Preload MF</Link>
    </PreloadLink>
  </>
}

API

dynamic

PreloadLink

PreloadLink's basename param is the same as RouteResourcePreloadPlugin's basename param

Plugin

RouteResourcePreloadPlugin

RouteResourcePreloadPlugin's basename param is the same as PreloadLink's basename param

Others

init / inview

modulePreloadMap Object

{
  "/A": ["../components/A"],
  // [route-path]: ['your components path']
}

mfPreloadMap Object

{
  "/MF": ["ling_core/Components"]
  // [route-path]: ['your components path']
}

assetsPreloadMap Object

{
  "/A": ['https://domain.com/xxx.png']
  // [route-path]: ['your assets link']
}