How to Lazy Load features using React and Webpack – codeburst

  • We don’t want to load our app’s whole component library when user enters our site.
  • We need to load components on demand, and after initial load, cache them in the memory for further use.Also we want lazy loading logic to be separated from the component implementations.We can solve this problem using Webpack import functions and Higher order components.Our HOC takes two arguments, second is the component which will be shown while component is loading, because we don’t want our users to be looking at the blank screen.First argument is the getComponent function, this is where we call Webpack import:One might ask why we don’t pass the path directly to the HOC.
  • E.g. if we do something like this: Webpack will bundle all the files in the .
  • If we pass the whole string directly import(‘.
  • But we cannot do this: path = import(path), because Webpack won’t know which files to consider, it won’t have any pattern to match files against.So our HOC, calls import before it mounts and displays the spinner while component is being downloaded.This way we can easily convert any statically imported component into lazy-loadable one.

In the modern web, every kilobyte matters. We don’t want to load our app’s whole component library when user enters our site. We need to load components on demand, and after initial load, cache them…

@JavaScriptKicks: How to Lazy Load features using React and Webpack by @notgiorgi #javascript #reactjs #webpack via @JavaScriptKicks

In the modern web, every kilobyte matters. We don’t want to load our app’s whole component library when user enters our site. We need to load components on demand, and after initial load, cache them in the memory for further use.

Also we want lazy loading logic to be separated from the component implementations.

functions and Higher order components.

Our HOC takes two arguments, second is the component which will be shown while component is loading, because we don’t want our users to be looking at the blank screen.

, because Webpack won’t know which files to consider, it won’t have any pattern to match files against.

before it mounts and displays the spinner while component is being downloaded.

This way we can easily convert any statically imported component into lazy-loadable one.

How to Lazy Load features using React and Webpack – codeburst