1. Cut it Up
Varun Vachhar
Director, UI Architecture at Rangle.io
✂️

2. Cut it Up 2
Bundling
What is code splitting?
Splitting applications
Code splitting strategies
Optimizing lazy loading
Outline
01
02
03
04
05

3. 01
02
03
04
05
Bundling
Cut it Up 3

4. Cut it Up
The process of compiling small pieces
of code into something larger and more
complex, such as a library or
application.
Bundling
4

5. Cut it Up
Task Runners
Bundling
Used to automate tasks in your
development workflow. You can use
them to process, concatenate and
minify assets of a certain type.
5

6. Cut it Up
Used to bundle several modules into
one or more optimized bundles for the
browser. Most notable bundlers are
Webpack, Parcel and Rollup.
Bundlers
Bundling
6

7. Everything is a Module!
● All files – CSS, HTML, SCSS, PNG, etc.
● ES2015 import statements
● require() statements
● @import statement in stylesheets
● Image url in a stylesheet or HTML
Cut it Up
Bundling
7

8. Cut it Up
Less to Learn
CLIs make it easy to create an
application that works, right out of the
box and generates optimized bundles
which are ready to deploy.
Bundling
❯ vue create my-project
❯ npx create-react-app my-app
❯ ng new my-project
8

9. Cut it Up Uniqlo Design System
Webpack
Bundling
Loaders 🖨🖨
Transform files into modules
Plugins 🔌
Customize or enhance the webpack
build process in a variety of ways.
module.exports = {
entry: '📄 Entry',
output: '📦 Output',
module: {
rules: ['🖨🖨
Loaders'],
},
plugins: ['🔌 Plugins'],
};

10. 01
02
03
04
05
Cut it Up 10
What Is Code
Splitting?

12. * The need for mobile speed: How mobile latency impacts publisher revenue
53%*
Of mobile site visits were abandoned if a
page took longer than 3 seconds to load.
Load Times
12

13. Instead of shipping all the JavaScript to the user on
first load, split your bundle into multiple chunks
and only send what is necessary at the very
beginning.
Cut it Up 13
Code Splitting

14. Cut it Up 14
Code Splitting
HTML
Main JS Chunk
CSS
Lazy-load chunks
as the user navigates
chunk #1 chunk #2 chunk #3
interactive

15. Splitting
Applications
01
02
03
04
05
Cut it Up 15

16. Cut it Up 16
import math from './math';
document.getElementById('#calculate')
.addEventListener('click', e => {
e.preventDefault();
math.calculateResult();
});
Static Imports
main.js

17. Cut it Up 17
Dynamic Imports
document.getElementById('#calculate')
.addEventListener('click', e => {
e.preventDefault();
import('./math').then(math => {
math.calculateResult();
});
});
main.js
math.js

18. When Webpack comes across the
import() syntax, it automatically starts
code-splitting your app.
Cut it Up
Code Splitting
18

19. Cut it Up 19
Static Components — React
import Photos from './Photos';
const Album = (
<div>
<Photos />
</div>
);

20. Cut it Up 20
Async Components — React
const Photos = React.lazy(() => import('./Photos'));
const Album = (
<div>
<Photos />
</div>
);

21. Cut it Up 21
Async Components — Vue
<template>
<div> <album></album> </div>
</template>
<script>
export default {
components: { album: () => import('./Album') }
};
</script>

22. Code Splitting
Strategies
01
02
03
04
05
Cut it Up 22

23. Cut it Up
Code splitting requires a bit of extra
effort as you have to decide what and
where to split.
Bundling
23

24. Cut it Up
Great option to get started with code-
splitting.
Break the application into chunks per
route, and then load that chunk when
the user navigates to that route.
Route Based
Code Splitting Strategies
24
about.js blog.jsmain.js
home.js

25. const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Blog = React.lazy(() => import('./Blog));
25
Route Based Code-Splitting — React
const App = () => (
<Router>
<React.Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/blog" component={Blog}/>
</Switch>
</React.Suspense>
</Router>
);

26. 26
const Home = () => ({ component: import('./Home'), loading: Loader });
const About = () => ({ component: import('./About'), loading: Loader });
const Blog = () => ({ component: import('./Blog), loading: Loader });
const router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/blog, component: Blog },
],
});
Route Based Code-Splitting — Vue

27. Cut it Up
Chunk Dependencies
28

28. Cut it Up
Automatically identifies modules which
should be split and avoids duplicated
dependencies across chunks.
Split Chunks Plugin
Code Splitting Strategies
29
optimization: {
splitChunks: {
chunks: 'all',
name: false,
}
}

29. Chunks are code which is broken apart from main bundle into their
own files.
● Vendor — dependency code coming from node_modules
● Common — code which is shared between different chunks
● Async — code which can be lazy-loaded
Cut it Up
Chunks
30

30. Cut it Up
Split components that load content on
demand or are hidden by default —
Tabs, Modals and Alerts
On-demand Content
Code Splitting Strategies
31

31. Cut it Up
Multi-step features such as checkout
flows which continue based clicks
should be split per step.
Isolate Process Flows
Code Splitting Strategies
32

32. Optimizing
Lazy Loading
01
02
03
04
05
Cut it Up 33

33. Cut it Up
A browser mechanism that prefetches
documents that the user might visit in
the near future
Prefetch
Optimizing Lazy Loading
34

34. Cut it Up
Detects visibility of an element
Intersection Observer
Optimizing Lazy Loading
35

35. from Faster Page-Loads by Chidume Nnamdi
Optimistically & Idly
Prefetch Resources
An IntersectionObserver is
registered for all links
Waits until the browser is idle
Prefetches URLs to the links
Optimizing Lazy Loading
36

36. Cut it Up
Or, use Quicklink
github.com/GoogleChromeLabs/quicklink
Optimizing Lazy Loading
37

37. Cut it Up
01
Your app was likely bootstrapped using a
CLI and using webpack for bundling.
Summary
38
02
Do enable route based code-splitting and
consider splitting on-demand
components.
03
Leverage the Split Chunks Plugin to avoid
duplication of code across chunks.
04
Optimistically and idly prefetch the split
chunks.

38. Thank you!
varun.ca
@winkerVSbecks

39. Cut it Up Rangle.io