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
210
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
78
Using the Gamepad API for a better gaming experience on the web
arunmichaeldsouza
0
230
Building your first web app with React JS, Webpack and Babel
arunmichaeldsouza
0
340
React 16 & NPM, Create your own library - React Delhi NCR 07 Oct 2018 Meetup
arunmichaeldsouza
0
180
Houdini, what lies ahead - Web Weekend Kathmandu 2018
arunmichaeldsouza
0
150
Intro to React Components - React Delhi NCR 01 Jul 2018 Meetup
arunmichaeldsouza
1
710
Houdini, what lies ahead - JSConf Iceland 2018
arunmichaeldsouza
0
470
The Era of Module Bundlers - GDG Dev Fest Delhi 2017
arunmichaeldsouza
0
170
Getting started with React 16
arunmichaeldsouza
1
1.2k
Other Decks in Programming
See All in Programming
機械学習って何? 5分で解説頑張ってみる
kuroneko2828
0
190
Devinで実践する!AIエージェントと協働する開発組織の作り方
masahiro_nishimi
6
2.9k
無関心の谷
kanayannet
0
160
ktr0731/go-mcpでMCPサーバー作ってみた
takak2166
0
140
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
740
実践ArchUnit ~実例による検証パターンの紹介~
ogiwarat
2
240
イベントストーミングから始めるドメイン駆動設計
jgeem
4
790
2度もゼロから書き直して、やっとブラウザでぬるぬる動くAIに辿り着いた話
tomoino
0
150
Parallel::Pipesの紹介
skaji
2
900
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
6
1.4k
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
0
280
Agent Rules as Domain Parser
yodakeisuke
1
530
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
910
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Done Done
chrislema
184
16k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Designing for Performance
lara
609
69k
Code Review Best Practice
trishagee
68
18k
The Invisible Side of Design
smashingmag
299
50k
A Tale of Four Properties
chriscoyier
159
23k
What's in a price? How to price your products and services
michaelherold
245
12k
Documentation Writing (for coders)
carmenintech
71
4.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.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!