📖 Guide To JavaScript Async Components
Also known as code splitting, dynamic import (TC39 proposal), "chunks" (which are loaded on demand), "layers", "rollups", or "fragments".
Async component (in React) is a technique (typically implemented as a Higher Order Component) for loading components with dynamic import
.
See also: Redux modules and code-splitting, lazy loading guidance
react-loadable
loadable-components
react-async-component
react-code-splitting
react-loadable-visibility
Routes to chunks
- separate into "chunks" based on routes, possible to do automatically. Example: Next.js
.Components to chunks
- separate components as "chunks". Example: react-loadable
.components to chunks
): show spinner
if content not loaded, but do not start spinner earlier then 200msroutes to chunks
): do not show spinner in the center of your page between the content switch, use progress line in the top, like YouTube does. Example: PACE.component placeholder
over spinner
if possibleroutes to chunks
): you can preload chunk (e.g. next page) on link hovercomponents to chunks
): make sure you wait till all components loaded in case of prerendered pages (SSR
or snapshots
)components to chunks
): some components can be skipped in case of SSR
, for example, Mapbox mapComponent placeholder
, also called skeleton screens
. Use react-content-loader, react-loading-skeleton
Spinner
. Use CSS3, like spinkit, loaders, css-loaders
See also:
Lazy load
- load images only when they appear on the screen. Use Intersection Observer API or react-waypoint
Load on demand
. Useful for slow networks or big files, like video or gif.load on demand
): Use download ⬇️ icon for images and play ▶️ icon for animations.See also:
Constant placeholder
- do not use itSolid color
or dominant color - fastest and simplest placeholders. Use color-thief to get color info. Used by Twitter, Google, PinterestLQIP
or Low Quality Image Placeholder or Progressive image loading or "Blur-up" - better for perceptual speed than dominant color, but also have a bigger weight. Use lqip or sqip. Used by Facebook and Medium.SVG traced images
. There is plugin for Gatsby.See also:
Fit to column width
, preserves ratio. Easy for images, for other media use something like responsive-embed
Fit to vertical grid
, preserves ratio. Example: Gutenberg
Intelligent cropping
(doesn't preserve ratio) - crop to required size taking into account focal point. Example: focal-point, focal point intelligent cropping.Choose size based on viewport
, can change or preserve ratio. Examples: <img>
with srcset
, <picture>
with srcset
and sizes
attributes, CSS @media
queries and background-image
Choose type of media based on viewport
or capabilities, can change or preserve ratio. Example: Foundation interchange, <Media render/>
, <source type>
.See also:
Go is the perfect fit for this kind of task. AWS Lambda now supports Go. Also you can use Go with Google Cloud functions.
A special case of async components. Example: react-virtualized