React is a declarative, efficient, and flexible JavaScript library for building user interfaces. Code Splitting helps apps to perform well where performance is key.

Code Splitting is the concept in React that helps to load the content only when it is actually required. Instead of loading the whole app even before a user can use it, we can write code effectively that it loads only when required.

A function can import the whole module using an import statement function and returns a promise as shown below.

import('./CodeSplitting/student')

### student.js
const Name = 'Divikiran Ravela';
export { Name };

Since import returns promise data will load when it is ready as shown below.

import('./CodeSplitting/student')
.then(({ Name }) => {
// Use moduleA
console.log("I am "+Name);
})

For example, if you wanted to load data when user clicks on button we can achieve as below

handleClick = (props) => {
import('./CodeSplitting/student')
.then(({ Name }) => {
// Use Student
console.log("I am " + Name);
})
.catch(err => {
// Handle failure
});
};

Here is full code if you are interested
Screen Shot 2017-09-28 at 11.18.31.png

Screen Shot 2017-09-28 at 11.16.08.png

Output:

Screen Shot 2017-09-28 at 11.18.56.png

Category:
Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: