react lazyloading

https://www.favicon-generator.org/ 

Code splitting is the splitting of code into various bundles or components which can then be loaded on demand or in parallel. As an application grows in complexity or is maintained, CSS and JavaScripts files or bundles grow in byte size, especially as the number and size of included third-party libraries increases.

To avoid winding up with a large bundle, it's good to get ahead of the problem and start “splitting” your bundle. Code-Splitting is a feature supported by bundlers like Webpack, Rollup and Browserify (via factor-bundle) which can create multiple bundles that can be dynamically loaded at runtime.

With Code splitting, we can reduce the initial bundle size, app loading time, and enhance its performance.

splitting the code into different bundles which can be loaded on demand (lazy-loaded) instead of being loaded all at once, 

Chunks allow us to separate our codes into bundles, which are a group of related chunks packaged into a single file. Tools such as Create React App, Gatsby, and Next. js use webpack to bundle applications. Bundlers like webpack import all of the application files and merge them into a single bundle.

Code-splitting your app can help you “lazy-load” just the things that are currently needed by the user, which can dramatically improve the performance of your app. 

note:---

While you haven’t reduced the overall amount of code in your app, you’ve avoided loading code that the user may never need, and reduced the amount of code needed during the initial load.

https://devcore.io/en/react/hocs-vs-hooks-what-to-use-and-why/