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
180
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
62
Using the Gamepad API for a better gaming experience on the web
arunmichaeldsouza
0
210
Building your first web app with React JS, Webpack and Babel
arunmichaeldsouza
0
290
React 16 & NPM, Create your own library - React Delhi NCR 07 Oct 2018 Meetup
arunmichaeldsouza
0
160
Houdini, what lies ahead - Web Weekend Kathmandu 2018
arunmichaeldsouza
0
130
Intro to React Components - React Delhi NCR 01 Jul 2018 Meetup
arunmichaeldsouza
1
690
Houdini, what lies ahead - JSConf Iceland 2018
arunmichaeldsouza
0
450
The Era of Module Bundlers - GDG Dev Fest Delhi 2017
arunmichaeldsouza
0
160
Getting started with React 16
arunmichaeldsouza
1
1.1k
Other Decks in Programming
See All in Programming
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
1.4k
Fixstars高速化コンテスト2024準優勝解法
eijirou
0
190
BEエンジニアがFEの業務をできるようになるまでにやったこと
yoshida_ryushin
0
200
Amazon Nova Reelの可能性
hideg
0
200
DevFest - Serverless 101 with Google Cloud Functions
tunmise
0
140
traP の部内 ISUCON とそれを支えるポータル / PISCON Portal
ikura_hamu
0
180
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
3
2.1k
Androidアプリのモジュール分割における:x:commonを考える
okuzawats
1
280
令和7年版 あなたが使ってよいフロントエンド機能とは
mugi_uno
10
5.1k
技術的負債と向き合うカイゼン活動を1年続けて分かった "持続可能" なプロダクト開発
yuichiro_serita
0
300
Azure AI Foundryのご紹介
qt_luigi
1
190
週次リリースを実現するための グローバルアプリ開発
tera_ny
1
1.2k
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Site-Speed That Sticks
csswizardry
2
270
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Optimising Largest Contentful Paint
csswizardry
33
3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
192
16k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k
Writing Fast Ruby
sferik
628
61k
Navigating Team Friction
lara
183
15k
The Cost Of JavaScript in 2023
addyosmani
46
7.2k
Mobile First: as difficult as doing things right
swwweet
222
9k
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!