CODE SPLITTING

✂️

HISTORY

🍯 Concat all the things !

• Globals everywhere
• Manually making sure everything is here
• gulp('*.js')

🏺 Home-made dependencies

• Sprokets     —
• Browserify  —
• Concat on steroids

const React = require('react');

//= require "react"

HISTORY

🐳 Huge bundles

🐢 Super slow first page load

🌀 Download again at every change

☠️ Most of the code will be unused

ES2015 MODULES

🌱 New official syntax

import React, { PureComponent } from 'react';
class Select extends PureComponent {}
export default Select;

📦 New build tools

• webpack
• Rollup
• Parcel
• ...

LET'S SPLIT THINGS !

ROUTE SPLITTING

pageA

pageB

React

datadog.js

COMMON SPLITTING

pageA

React

pageA.js

pageB

React

pageB.js

COMMON SPLITTING

pageA

React

pageA.js

pageB

React

pageB.js

ASYNC LOADING

📡  Load code on demand

🔄  No more full reloads

✂️  Another level of splitting

ASYNC LOADING

🏺 Before: home-made

require.ensure(['pageA'], require => {});

import('pageA').then(module => {});

🌱 Now almost official

✨ Improved by libraries

• react-loadable
• ...

ASYNC LOADING

⏱️ Waiting for API calls

• loading the component displaying the data

🛣 Single page applications routing

• loading the next page

🖥️ Anything that is not on screen

• loading components when we need to display them

COMPONENT SPLITTING

GAINS