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
82
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
710
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
QA x AIエコシステム段階構築作戦
osu
0
210
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
470
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
8.4k
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
120
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
130
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
170
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
250
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
190
PHPカンファレンス関西2025 基調講演
sugimotokei
5
1k
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
860
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.1k
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Done Done
chrislema
184
16k
Optimizing for Happiness
mojombo
379
70k
Building Applications with DynamoDB
mza
95
6.5k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Adopting Sorbet at Scale
ufuk
77
9.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Faster Mobile Websites
deanohume
308
31k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Visualization
eitanlees
146
16k
Navigating Team Friction
lara
187
15k
Embracing the Ebb and Flow
colly
86
4.8k
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!