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
220
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
85
Using the Gamepad API for a better gaming experience on the web
arunmichaeldsouza
0
240
Building your first web app with React JS, Webpack and Babel
arunmichaeldsouza
0
350
React 16 & NPM, Create your own library - React Delhi NCR 07 Oct 2018 Meetup
arunmichaeldsouza
0
190
Houdini, what lies ahead - Web Weekend Kathmandu 2018
arunmichaeldsouza
0
160
Intro to React Components - React Delhi NCR 01 Jul 2018 Meetup
arunmichaeldsouza
1
720
Houdini, what lies ahead - JSConf Iceland 2018
arunmichaeldsouza
0
480
The Era of Module Bundlers - GDG Dev Fest Delhi 2017
arunmichaeldsouza
0
180
Getting started with React 16
arunmichaeldsouza
1
1.2k
Other Decks in Programming
See All in Programming
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
13
2.8k
ワープロって実は計算機で
pepepper
2
1.4k
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
210
自作OSでDOOMを動かしてみた
zakki0925224
1
1.4k
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
130
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
1k
あなたとJIT, 今すぐアセンブ ル
sisshiki1969
1
730
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
840
コーディングエージェント時代のNeovim
key60228
1
100
AWS Serverless Application Model入門_20250708
smatsuzaki
0
130
ソフトウェアテスト徹底指南書の紹介
goyoki
1
110
あのころの iPod を どうにか再生させたい
orumin
2
2.5k
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Bash Introduction
62gerente
614
210k
The Cost Of JavaScript in 2023
addyosmani
53
8.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Side Projects
sachag
455
43k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Raft: Consensus for Rubyists
vanstee
140
7.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
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!