What is code splitting and how to introduce code splitting in React applications
In terms of bundle size, modern JavaScript applications can be very large. You don't want your users to download the 1MB JavaScript package (your code and libraries) just by downloading the first page, right? But this is by default, when you publish a modern web application built with Webpack bundling.
The bundle will contain code that may never run because the user will only stay on the login page and not see the rest of the application.
Code splitting is a practice of loading the required JavaScript only when needed.
This can improve:
- The performance of your application
- Impact on memory and battery usage on mobile devices
- The kilobyte (or megabyte) size of the download
React 16.6.0, released in October 2018, introduced a method to perform code splitting, which should replace every tool or library previously used:React.lazywithsuspense.
React.lazy
withSuspense
The perfect way to form a lazy-loaded dependency and load it only when needed.
let us beginReact.lazy
. You can use it to import any component:
import React from 'react'
const TodoList = React.lazy(() => import(’./TodoList’))
export default () => {
return (
<div>
<TodoList />
</div>
)
}
The TodoList component will be dynamically added to the output as soon as it is available. Webpack will create a separate package for it and will be responsible for loading it when necessary.
Suspense
Is a component that can be used to wrap any lazy-loaded component:
import React from 'react'
const TodoList = React.lazy(() => import(’./TodoList’))
export default () => {
return (
<div>
<React.Suspense>
<TodoList />
</React.Suspense>
</div>
)
}
It processes the output when getting and rendering lazily loaded components.
Use itfallback
Props output some JSX or component output:
...
<React.Suspense fallback={<p>Please wait</p>}>
<TodoList />
</React.Suspense>
...
All of these can run normally on React Router:
import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
const TodoList = React.lazy(() => import(’./routes/TodoList’))
const NewTodo = React.lazy(() => import(’./routes/NewTodo’))
const App = () => (
<Router>
<React.Suspense fallback={<p>Please wait</p>}>
<Switch>
<Route exact path="/" component={TodoList} />
<Route path="/new" component={NewTodo} />
</Switch>
</React.Suspense>
</Router>
)
Download mine for freeResponse Handbook
More response tutorials:
- A simple React application example: Get GitHub user information through API
- Build a simple counter with React
- VS Code setup for React development
- How to pass props to child components through React Router
- Create an application using Electron and React
- Tutorial: Create a spreadsheet with React
- Roadmap for learning React
- Learn how to use Redux
- Getting started with JSX
- Stylized components
- Introduction to Redux Saga
- Introduction to React Router
- Introduction to React
- Reaction component
- Virtual DOM
- Reaction event
- Reaction state
- Reaction props
- Reaction fragment
- React Context API
- Reaction PropTypes
- Reaction Concept: Declarative
- React: How to display other components when clicked
- How to loop inside React JSX
- Props and status in React
- Should you use jQuery or React?
- How much JavaScript do I need to know to use React?
- Gatsby Introduction
- How to reference DOM elements in React
- One-way data flow in React
- React high-end components
- React to life cycle events
- Reaction concept: immutability
- Reaction concept: purity
- Introduction to React hooks
- Introduction to create-react-app
- Reaction concept: composition
- React: demo component and container component
- Code splitting in React
- Server-side rendering with React
- How to install React
- CSS in React
- Use SASS in React
- Processing forms in React
- Reaction strict mode
- Reaction portal
- React rendering props
- Test React components
- How to pass parameters to event handlers in React
- How to deal with errors in React
- How to return multiple elements in JSX
- Conditional rendering in React
- Reaction, how to transfer props to subcomponents
- How to get the value of an input element in React
- How to use useState React hook
- How to use useCallback React hook
- How to use useEffect React hook
- How to use useMemo React hook
- How to use useRef React hook
- How to use useContext React hook
- How to use useReducer React hook
- How to connect your React app to the backend of the same source
- Reaching the router tutorial
- How to use React Developer Tools
- How to learn React
- How to debug a React application
- How to render HTML in React
- How to fix `dangerouslySetInnerHTML` does not match the error in React
- How can I solve the problem of React login form status and browser auto-fill
- How to configure HTTPS in React application on localhost
- How to fix the "Component cannot be updated while rendering other components" error in React
- Can I use React hooks within the conditions?
- Using useState with objects: how to update
- How to move in code blocks using React and Tailwind
- React, focus on an item in React when added to the DOM
- Response, edit text on doubleclick