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
170
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
49
Using the Gamepad API for a better gaming experience on the web
arunmichaeldsouza
0
190
Building your first web app with React JS, Webpack and Babel
arunmichaeldsouza
0
260
React 16 & NPM, Create your own library - React Delhi NCR 07 Oct 2018 Meetup
arunmichaeldsouza
0
150
Houdini, what lies ahead - Web Weekend Kathmandu 2018
arunmichaeldsouza
0
120
Intro to React Components - React Delhi NCR 01 Jul 2018 Meetup
arunmichaeldsouza
1
670
Houdini, what lies ahead - JSConf Iceland 2018
arunmichaeldsouza
0
430
The Era of Module Bundlers - GDG Dev Fest Delhi 2017
arunmichaeldsouza
0
150
Getting started with React 16
arunmichaeldsouza
1
1.1k
Other Decks in Programming
See All in Programming
The Future of Frontend i18n : Intl.MessageFormat
sajikix
1
2.4k
Rechartsで楽にゴリゴリにカスタマイズする!
10tera
1
140
暴走のウホーレン 〜想いってのはvimrcにしないと伝わらないんだぜ〜 / iosdc_japan_2024
uhooi
1
240
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
130
Method Swizzlingを行うライブラリにおけるマルチモジュール設計
yoshikma
0
110
ESLint Rule により事業, 技術ドメインに沿った制約と誓約を敷衍させるアプローチのすゝめ
shinyaigeek
1
2.9k
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
13
6.4k
dotfiles について話したい #湘なんか
stefafafan
2
290
全力の跳躍を捉える計測アプリを作る
ogijun2018
1
1.2k
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
490
現代のVueとTypeScript - 型安全の活用術
minako__ph
4
3.1k
1人で挑むSwiftコンパイラ 〜型システム入門編〜
s_shimotori
0
320
Featured
See All Featured
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
How to name files
jennybc
75
98k
Into the Great Unknown - MozCon
thekraken
28
1.4k
A Philosophy of Restraint
colly
202
16k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
Writing Fast Ruby
sferik
623
60k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
88
16k
From Idea to $5000 a Month in 5 Months
shpigford
378
46k
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!