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
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
460
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
520
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
400
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
950
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
140
Create a website using Spatial Web
akkeylab
0
310
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
130
A2A プロトコルを試してみる
azukiazusa1
2
1.2k
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
710
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
GraphQLとの向き合い方2022年版
quramy
49
14k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Facilitating Awesome Meetings
lara
54
6.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Language of Interfaces
destraynor
158
25k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
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!