This feature splits your code into various bundles which are loaded on demand. It is used to achieve smaller bundles and control resource load prioritization. This has a major impact on load time. To specify the splitting point you need to import modules in an asynchronous manner. To make it work with React, Falcon Client uses loadable.
Asynchronous components are based on the loadable package.
It is highly recommended to make each page component asynchronous. Then page chunks do not increase in size when you add more pages, as they contain only the necessary amount of code to load that specific page.
To convert React Component into a component which can be fetched on demand later, you need to wrap it with a
When you create your project using
create-falcon-app Falcon provides a wrapper function for
loadable. This wrapper function shows a spinner while the component is loading to indicate to the user that the contents of the page are currently being fetched. Using this wrapper function is optional, but it is recommended to provide a fallback state to
loadable if you choose to write your own.
For more information see
loadable on GitHub.
vendors.js is a chunk which combines only the common project dependencies into single file. As they should not change often, even between subsequent releases, it allows to turn on long term caching for rather big files.