Code-splitting with Webpack on the component level

Code-splitting is one answer to the problem of monolithic bundles. It’s the idea that by defining split-points in your code, it can be split into different files that are lazy loaded on demand. This improves startup time and help us get to being interactive sooner.

Code-splitting by routes

Code-splitting by component

{
"modules": {
"content_type": "page",
"items": [{
"content_type": "section",
"items": [{
"content_type": "block",
"items": [],
"content": {
"size": 12
},
}],
"content": {
...
},
"locale": "en"
}, {
"content_type": "carousel",
"items": [{
"content_type": "carousel_item",
"content": {
...
},
},
...
],
},
...
{
"content_type": "section",
"items": [],
"content": {
...
},
}
],
}
}

Fixing SSR

We don’t currently support per-component async fetching. We’d like to add it. This issue tracks our progress, though no one is actively working on it and it will take major restructuring so it will be a while.

fetchDependencies(getInitialState(), store).then(() => render());

Prevent FOUC

FOUT on calendar page

Redux async reducers

Measurements

Home page before
Home page after
Calendar page before
Calendar page after
Auction page before
Auction page after
Lot page before
Lot page after

Conclusions

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store