Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React JS Code Splitting - Why and How?
Search
Arun Michael Dsouza
June 30, 2019
Programming
1
190
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
0
66
Using the Gamepad API for a better gaming experience on the web
arunmichaeldsouza
0
210
Building your first web app with React JS, Webpack and Babel
arunmichaeldsouza
0
300
React 16 & NPM, Create your own library - React Delhi NCR 07 Oct 2018 Meetup
arunmichaeldsouza
0
170
Houdini, what lies ahead - Web Weekend Kathmandu 2018
arunmichaeldsouza
0
130
Intro to React Components - React Delhi NCR 01 Jul 2018 Meetup
arunmichaeldsouza
1
690
Houdini, what lies ahead - JSConf Iceland 2018
arunmichaeldsouza
0
460
The Era of Module Bundlers - GDG Dev Fest Delhi 2017
arunmichaeldsouza
0
160
Getting started with React 16
arunmichaeldsouza
1
1.2k
Other Decks in Programming
See All in Programming
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
Domain-Driven Transformation
hschwentner
2
1.9k
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.1k
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
100
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
Linux && Docker 研修/Linux && Docker training
forrep
23
4.5k
DROBEの生成AI活用事例 with AWS
ippey
0
130
SpringBoot3.4の構造化ログ #kanjava
irof
2
970
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
How STYLIGHT went responsive
nonsquared
98
5.3k
Site-Speed That Sticks
csswizardry
3
370
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Docker and Python
trallard
44
3.3k
The Invisible Side of Design
smashingmag
299
50k
Visualization
eitanlees
146
15k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Designing Experiences People Love
moore
139
23k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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!