Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
React JS Code Splitting - Why and How?
Arun Michael Dsouza
June 30, 2019
Programming
2
110
React JS Code Splitting - Why and How?
Slides for "React JS Code Splitting - Why and How?" workshop.
Arun Michael Dsouza
June 30, 2019
Tweet
Share
More Decks by Arun Michael Dsouza
See All by Arun Michael Dsouza
Using the Gamepad API for a better gaming experience on the web
arunmichaeldsouza
1
92
Building your first web app with React JS, Webpack and Babel
arunmichaeldsouza
1
150
React 16 & NPM, Create your own library - React Delhi NCR 07 Oct 2018 Meetup
arunmichaeldsouza
1
85
Houdini, what lies ahead - Web Weekend Kathmandu 2018
arunmichaeldsouza
1
82
Intro to React Components - React Delhi NCR 01 Jul 2018 Meetup
arunmichaeldsouza
2
600
Houdini, what lies ahead - JSConf Iceland 2018
arunmichaeldsouza
1
300
The Era of Module Bundlers - GDG Dev Fest Delhi 2017
arunmichaeldsouza
1
120
Getting started with React 16
arunmichaeldsouza
2
910
The Era of Module Bundlers - JSConf Belgium 2017
arunmichaeldsouza
1
210
Other Decks in Programming
See All in Programming
Git操作編
smt7174
2
260
SRE NEXT 2022に学ぶこれからのSREキャリア
fukubaka0825
2
400
ZOZOTOWNにおけるDatadogの活用と、それを支える全社管理者の取り組み / 2022-07-27
tippy
1
3.5k
Register-based calling convention for Go functions
cjamhe01385
0
420
atama plusの開発チームはどのように「不確実性」に向き合ってきたか〜2022夏版〜
atamaplus
3
640
Rust、何もわからない...#3
estie
0
170
動画合成アーキテクチャを実装してみて
satorunooshie
0
570
Isar勉強会
hoddy3190
0
560
レビュー駆動学習のススメ_StaPy#83
soogie
0
320
Windows コンテナ Dojo 第5回 OpenShift で学ぶ Kubernetes 入門
oniak3ibm
PRO
0
200
話題の AlloyDB は本当に凄いデータベースなのでプレビューを使い倒した #devio2022
maroon1st
0
13k
設計の考え方とやり方
masuda220
PRO
56
31k
Featured
See All Featured
Three Pipe Problems
jasonvnalue
89
8.7k
GraphQLの誤解/rethinking-graphql
sonatard
31
6.8k
A Philosophy of Restraint
colly
192
15k
Fantastic passwords and where to find them - at NoRuKo
philnash
27
1.6k
Making the Leap to Tech Lead
cromwellryan
113
7.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
6
580
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.7k
We Have a Design System, Now What?
morganepeng
35
3k
Code Review Best Practice
trishagee
44
9.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
344
17k
The Art of Programming - Codeland 2020
erikaheidi
32
11k
Agile that works and the tools we love
rasmusluckow
319
19k
Transcript
React JS Code Splitting - Why and How?
bit.ly/react-delhincr
Speakers/Mentors Arun Michael Dsouza @amdsouza92 Kartik Agarwal @kartikag01
Why Code Splitting?
None
None
⚠ Performance
• Multiple HTTP requests to complete • Large payload to
download • Site load speed becomes slow • Multiple files for the browser to process
hobo-web.co.uk (2018)
None
None
• Lesser HTTP requests to complete • Large payload to
download • Site load speed improves • Lesser files for the browser to process
⚠ Shipping too much too soon!
washingtonpost.com
Every byte counts!
developers.google.com
What if we ship our JavaScript on demand?
/home vendor.js home.js /settings settings.js /messages messages.js /profile profile.js
• Limited HTTP requests to complete • Less payload to
download • Site load speed improves drastically • Limited files for the browser to process
How Code Splitting Works?
Dynamic import
None
• Route-level Code-Splitting • Component-level Code-Splitting
github.com
Code Splitting Codelab
• Clone the repo • > git clone https://github.com/React-Delhi-NCR/workshop-02-react-js-code-splitting.git •
Install dependencies • > npm install • Build project and start server • > npm start • This will start the project server on http://localhost:5000
• https://developers.google.com/web/fundamentals/performance/optimizing- javascript/code-splitting/ • https://webpack.js.org/guides/code-splitting/ • https://reactjs.org/docs/code-splitting.html • https://github.com/jamiebuilds/react-loadable •
https://medium.com/front-end-weekly/webpack-and-dynamic-imports- doing-it-right-72549ff49234 • https://www.youtube.com/watch?v=0jB4YWgAxUo Further Reading
Thank you!