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
130
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
120
Building your first web app with React JS, Webpack and Babel
arunmichaeldsouza
1
160
React 16 & NPM, Create your own library - React Delhi NCR 07 Oct 2018 Meetup
arunmichaeldsouza
1
87
Houdini, what lies ahead - Web Weekend Kathmandu 2018
arunmichaeldsouza
1
89
Intro to React Components - React Delhi NCR 01 Jul 2018 Meetup
arunmichaeldsouza
2
620
Houdini, what lies ahead - JSConf Iceland 2018
arunmichaeldsouza
1
330
The Era of Module Bundlers - GDG Dev Fest Delhi 2017
arunmichaeldsouza
1
130
Getting started with React 16
arunmichaeldsouza
2
930
The Era of Module Bundlers - JSConf Belgium 2017
arunmichaeldsouza
1
240
Other Decks in Programming
See All in Programming
(新米)エンジニアリングマネージャーのしごと #RSGT2023
murabayashi
9
5.6k
Prácticas de Seguridad en Kubernetes
pablokbs
0
120
Remote SSHで行うVS Codeリモートホスト開発とトラブルシューティング
smt7174
1
440
domain層のモジュール化 / MoT TechTalk #15
mot_techtalk
0
110
AWSにおける標的型Bot対策
hacomono
0
400
xarray-Datatree: Hierarchical Data Structures for Multi-Model Science
tomnicholas
0
210
レガシーフレームワークからの移行
ug
0
110
Micro Frontends with Module Federation @MicroFrontend Summit 2023
manfredsteyer
PRO
0
480
Swift Concurrency in GoodNotes
inamiy
4
1.3k
ITエンジニア特化型Q&Aサイトteratailを 言語、DB、クラウドなど フルリプレイスした話
leveragestech
0
400
低レイヤーから始める GUI
fadis
18
9.3k
Enumを自動で網羅的にテストしてみた
estie
0
1.2k
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
326
55k
No one is an island. Learnings from fostering a developers community.
thoeni
12
1.5k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
128
8.8k
Raft: Consensus for Rubyists
vanstee
130
5.7k
Rails Girls Zürich Keynote
gr2m
87
12k
YesSQL, Process and Tooling at Scale
rocio
159
12k
Code Reviewing Like a Champion
maltzj
508
38k
Statistics for Hackers
jakevdp
785
210k
Bash Introduction
62gerente
601
210k
Scaling GitHub
holman
453
140k
Fontdeck: Realign not Redesign
paulrobertlloyd
74
4.3k
WebSockets: Embracing the real-time Web
robhawkes
58
6k
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!