You know what? Basic use of react-loadable for code splitting

We should take a look at how Code Splitting in the React project can be done:….. .

There are many ideas of code-splitting, and many people choose Splitting schemes based on different routes to achieve on-demand loading of components. The downside is that you just split the code based on the difference between the top-level routes.

The React Loadable library is mentioned in the “Advanced Guidelines” section of the React documentation. React Loadable can be explained in one sentence. Route-centric code splitting is shit, component-centric splitting is cool as shit.

Git readme: Git git git git git git git git git git git git

It can be seen intuitively that there are many subdivisions when splitting the code according to the route. For example, a route contains some UI components that need to be displayed by specific operations. This component does not need to be loaded when the parent route is loaded.

Loadable is essentially a higher-order component that can easily split code around react components. How to React Loadable?

Let’s say we have two components. Component MyComponent introduces and renders the component Bar. The general operation is as follows:

Let’s sublimate and render the Bar when MyComponent needs to render it:

This is already getting complicated, and on closer inspection, there are many scenarios that are not taken into account, such as when import fails and when server-side rendering is required.

Loadable can help solve this problem:

So the code is clear, and loadable has done that for us.

Tip: when we use import() in conjunction with webpack2+, code splitting is done automatically without additional configuration. This means that when import(), Webpack2 +, and React Loadable play together, we only need to consider the split points of the code as much as possible.

Let’s look at the API Loadable provides for us, in contrast to the normal split:

Loadable:

Rendering the module first before rendering it returns a LoadableComponent(described below) :

Loadable. The Map:

Higher-order components that allow you to load multiple resources in parallel, where the Loader option accepts a function object and requires a render method:

Loadable and loadable. Map receive parameters:

· Loader passes in components to be loaded

· What is displayed during loading or when loading fails? This option is mandatory. Null is passed if you do not want to display anything

Delay,

·timeout The wait time for the component to load. This option is passed to the component parameter props. Timeout, off by default.

A function that customizes the rendering of the loaded module. It takes two arguments: the object received by the loader and props.

· WebPack optional, which makes components “weak” dependencies (without importing modules into bundles), automatically implemented when using Babel.

· Modules Optional, an array of optional paths to the module to be imported.

LoadableComponent:

This is the component returned by Loadable or loadable.map.

LoadableComponent. Preload () :

For preloading (preloading) LoadableComponent, suppose there is a component that is displayed when a button is clicked and preloads when the mouse is over the button:

LoadableComponent Can accept props:

· Error loading fails. If the value is NULL, the loading is successful.

· Retry Reloading (retry), use cases:

·timeOut A Boolean value that is passed to the component when the request times out. Use cases:

·postDelay Boolean value, returned to component after arrival time delay, use case:

Use cases of the above parameters:

React Loadable functions and usage

React Loadable implements asynchronous operations using promise objects returned by import ().

Even so, splitting the code is not that easy, and making sure that the location we choose to split the package evenly without affecting the user experience is another challenge. A good place to start is with component-based splitting on top of routing-based splitting code.

Finally, you can discuss in the comments section some of your own split code good solutions, experiences or doubts, let’s discuss it together ~

Welcome to pay attention to our public number

Web front-end Talk