SlideShare a Scribd company logo
1 of 39
Download to read offline
Cut it Up
Varun Vachhar
Director, UI Architecture at Rangle.io
✂️
Cut it Up 2
Bundling
What is code splitting?
Splitting applications
Code splitting strategies
Optimizing lazy loading
Outline
01
02
03
04
05
01
02
03
04
05
Bundling
Cut it Up 3
Cut it Up
The process of compiling small pieces
of code into something larger and more
complex, such as a library or
application.
Bundling
4
Cut it Up
Task Runners
Bundling
Used to automate tasks in your
development workflow. You can use
them to process, concatenate and
minify assets of a certain type.
5
Cut it Up
Used to bundle several modules into
one or more optimized bundles for the
browser. Most notable bundlers are
Webpack, Parcel and Rollup.
Bundlers
Bundling
6
Everything is a Module!
● All files – CSS, HTML, SCSS, PNG, etc.
● ES2015 import statements
● require() statements
● @import statement in stylesheets
● Image url in a stylesheet or HTML
Cut it Up
Bundling
7
Cut it Up
Less to Learn
CLIs make it easy to create an
application that works, right out of the
box and generates optimized bundles
which are ready to deploy.
Bundling
❯ vue create my-project
❯ npx create-react-app my-app
❯ ng new my-project
8
Cut it Up Uniqlo Design System
Webpack
Bundling
Loaders 🖨🖨
Transform files into modules
Plugins 🔌
Customize or enhance the webpack
build process in a variety of ways.
module.exports = {
entry: '📄 Entry',
output: '📦 Output',
module: {
rules: ['🖨🖨
Loaders'],
},
plugins: ['🔌 Plugins'],
};
01
02
03
04
05
Cut it Up 10
What Is Code
Splitting?
Cut it up
* The need for mobile speed: How mobile latency impacts publisher revenue
53%*
Of mobile site visits were abandoned if a
page took longer than 3 seconds to load.
Load Times
12
Instead of shipping all the JavaScript to the user on
first load, split your bundle into multiple chunks
and only send what is necessary at the very
beginning.
Cut it Up 13
Code Splitting
Cut it Up 14
Code Splitting
HTML
Main JS Chunk
CSS
Lazy-load chunks
as the user navigates
chunk #1 chunk #2 chunk #3
interactive
Splitting
Applications
01
02
03
04
05
Cut it Up 15
Cut it Up 16
import math from './math';
document.getElementById('#calculate')
.addEventListener('click', e => {
e.preventDefault();
math.calculateResult();
});
Static Imports
main.js
Cut it Up 17
Dynamic Imports
document.getElementById('#calculate')
.addEventListener('click', e => {
e.preventDefault();
import('./math').then(math => {
math.calculateResult();
});
});
main.js
math.js
When Webpack comes across the
import() syntax, it automatically starts
code-splitting your app.
Cut it Up
Code Splitting
18
Cut it Up 19
Static Components — React
import Photos from './Photos';
const Album = (
<div>
<Photos />
</div>
);
Cut it Up 20
Async Components — React
const Photos = React.lazy(() => import('./Photos'));
const Album = (
<div>
<Photos />
</div>
);
Cut it Up 21
Async Components — Vue
<template>
<div> <album></album> </div>
</template>
<script>
export default {
components: { album: () => import('./Album') }
};
</script>
Code Splitting
Strategies
01
02
03
04
05
Cut it Up 22
Cut it Up
Code splitting requires a bit of extra
effort as you have to decide what and
where to split.
Bundling
23
Cut it Up
Great option to get started with code-
splitting.
Break the application into chunks per
route, and then load that chunk when
the user navigates to that route.
Route Based
Code Splitting Strategies
24
about.js blog.jsmain.js
home.js
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Blog = React.lazy(() => import('./Blog));
25
Route Based Code-Splitting — React
const App = () => (
<Router>
<React.Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/blog" component={Blog}/>
</Switch>
</React.Suspense>
</Router>
);
26
const Home = () => ({ component: import('./Home'), loading: Loader });
const About = () => ({ component: import('./About'), loading: Loader });
const Blog = () => ({ component: import('./Blog), loading: Loader });
const router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/blog, component: Blog },
],
});
Route Based Code-Splitting — Vue
Cut it Up
Chunk Dependencies
28
Cut it Up
Automatically identifies modules which
should be split and avoids duplicated
dependencies across chunks.
Split Chunks Plugin
Code Splitting Strategies
29
optimization: {
splitChunks: {
chunks: 'all',
name: false,
}
}
Chunks are code which is broken apart from main bundle into their
own files.
● Vendor — dependency code coming from node_modules
● Common — code which is shared between different chunks
● Async — code which can be lazy-loaded
Cut it Up
Chunks
30
Cut it Up
Split components that load content on
demand or are hidden by default —
Tabs, Modals and Alerts
On-demand Content
Code Splitting Strategies
31
Cut it Up
Multi-step features such as checkout
flows which continue based clicks
should be split per step.
Isolate Process Flows
Code Splitting Strategies
32
Optimizing
Lazy Loading
01
02
03
04
05
Cut it Up 33
Cut it Up
A browser mechanism that prefetches
documents that the user might visit in
the near future
Prefetch
Optimizing Lazy Loading
34
Cut it Up
Detects visibility of an element
Intersection Observer
Optimizing Lazy Loading
35
from Faster Page-Loads by Chidume Nnamdi
Optimistically & Idly
Prefetch Resources
An IntersectionObserver is
registered for all links
Waits until the browser is idle
Prefetches URLs to the links
Optimizing Lazy Loading
36
Cut it Up
Or, use Quicklink
github.com/GoogleChromeLabs/quicklink
Optimizing Lazy Loading
37
Cut it Up
01
Your app was likely bootstrapped using a
CLI and using webpack for bundling.
Summary
38
02
Do enable route based code-splitting and
consider splitting on-demand
components.
03
Leverage the Split Chunks Plugin to avoid
duplication of code across chunks.
04
Optimistically and idly prefetch the split
chunks.
Thank you!
varun.ca
@winkerVSbecks
Cut it Up Rangle.io

More Related Content

Similar to Cut it up

Struts2 tutorial
Struts2 tutorialStruts2 tutorial
Struts2 tutorializdihara
 
generate IP CORES
generate IP CORESgenerate IP CORES
generate IP CORESguest296013
 
Micro-Frontends JSVidCon
Micro-Frontends JSVidConMicro-Frontends JSVidCon
Micro-Frontends JSVidConAmir Zuker
 
Web components with Angular
Web components with AngularWeb components with Angular
Web components with AngularAna Cidre
 
Angular - Chapter 3 - Components
Angular - Chapter 3 - ComponentsAngular - Chapter 3 - Components
Angular - Chapter 3 - ComponentsWebStackAcademy
 
Web components - An Introduction
Web components - An IntroductionWeb components - An Introduction
Web components - An Introductioncherukumilli2
 
I doc packaging and mapping techniques.doc
I doc packaging and mapping techniques.docI doc packaging and mapping techniques.doc
I doc packaging and mapping techniques.docVERUS BRASIL
 
Architecting Wide-ranging Analytical Solutions with MongoDB
Architecting Wide-ranging Analytical Solutions with MongoDBArchitecting Wide-ranging Analytical Solutions with MongoDB
Architecting Wide-ranging Analytical Solutions with MongoDBMatthew Kalan
 
Angular 2 for Java Developers
Angular 2 for Java DevelopersAngular 2 for Java Developers
Angular 2 for Java DevelopersYakov Fain
 
Qt Installer Framework
Qt Installer FrameworkQt Installer Framework
Qt Installer FrameworkICS
 
WEBPACK
WEBPACKWEBPACK
WEBPACKhome
 
Unit 14 Event-Driven Programming (P1, M1, D1)
Unit 14 Event-Driven Programming (P1, M1, D1)Unit 14 Event-Driven Programming (P1, M1, D1)
Unit 14 Event-Driven Programming (P1, M1, D1)Courtney Bennett
 
Build your first DApp using Substrate Framework - Part I
Build your first DApp using Substrate Framework - Part IBuild your first DApp using Substrate Framework - Part I
Build your first DApp using Substrate Framework - Part IKnoldus Inc.
 
Ci tips and_tricks_linards_liepins
Ci tips and_tricks_linards_liepinsCi tips and_tricks_linards_liepins
Ci tips and_tricks_linards_liepinsLinards Liep
 
Architecting your Frontend
Architecting your FrontendArchitecting your Frontend
Architecting your FrontendRuben Teijeiro
 
Build 2016 - B880 - Top 6 Reasons to Move Your C++ Code to Visual Studio 2015
Build 2016 - B880 - Top 6 Reasons to Move Your C++ Code to Visual Studio 2015Build 2016 - B880 - Top 6 Reasons to Move Your C++ Code to Visual Studio 2015
Build 2016 - B880 - Top 6 Reasons to Move Your C++ Code to Visual Studio 2015Windows Developer
 
Ds white papers_caa_radebyexample
Ds white papers_caa_radebyexampleDs white papers_caa_radebyexample
Ds white papers_caa_radebyexampleTrần Đức
 

Similar to Cut it up (20)

Swt 2009
Swt 2009Swt 2009
Swt 2009
 
Struts2 tutorial
Struts2 tutorialStruts2 tutorial
Struts2 tutorial
 
Isset Presentation @ EECI2009
Isset Presentation @ EECI2009Isset Presentation @ EECI2009
Isset Presentation @ EECI2009
 
generate IP CORES
generate IP CORESgenerate IP CORES
generate IP CORES
 
Micro-Frontends JSVidCon
Micro-Frontends JSVidConMicro-Frontends JSVidCon
Micro-Frontends JSVidCon
 
Web components with Angular
Web components with AngularWeb components with Angular
Web components with Angular
 
Angular - Chapter 3 - Components
Angular - Chapter 3 - ComponentsAngular - Chapter 3 - Components
Angular - Chapter 3 - Components
 
micro-frontends-with-vuejs
micro-frontends-with-vuejsmicro-frontends-with-vuejs
micro-frontends-with-vuejs
 
Web components - An Introduction
Web components - An IntroductionWeb components - An Introduction
Web components - An Introduction
 
I doc packaging and mapping techniques.doc
I doc packaging and mapping techniques.docI doc packaging and mapping techniques.doc
I doc packaging and mapping techniques.doc
 
Architecting Wide-ranging Analytical Solutions with MongoDB
Architecting Wide-ranging Analytical Solutions with MongoDBArchitecting Wide-ranging Analytical Solutions with MongoDB
Architecting Wide-ranging Analytical Solutions with MongoDB
 
Angular 2 for Java Developers
Angular 2 for Java DevelopersAngular 2 for Java Developers
Angular 2 for Java Developers
 
Qt Installer Framework
Qt Installer FrameworkQt Installer Framework
Qt Installer Framework
 
WEBPACK
WEBPACKWEBPACK
WEBPACK
 
Unit 14 Event-Driven Programming (P1, M1, D1)
Unit 14 Event-Driven Programming (P1, M1, D1)Unit 14 Event-Driven Programming (P1, M1, D1)
Unit 14 Event-Driven Programming (P1, M1, D1)
 
Build your first DApp using Substrate Framework - Part I
Build your first DApp using Substrate Framework - Part IBuild your first DApp using Substrate Framework - Part I
Build your first DApp using Substrate Framework - Part I
 
Ci tips and_tricks_linards_liepins
Ci tips and_tricks_linards_liepinsCi tips and_tricks_linards_liepins
Ci tips and_tricks_linards_liepins
 
Architecting your Frontend
Architecting your FrontendArchitecting your Frontend
Architecting your Frontend
 
Build 2016 - B880 - Top 6 Reasons to Move Your C++ Code to Visual Studio 2015
Build 2016 - B880 - Top 6 Reasons to Move Your C++ Code to Visual Studio 2015Build 2016 - B880 - Top 6 Reasons to Move Your C++ Code to Visual Studio 2015
Build 2016 - B880 - Top 6 Reasons to Move Your C++ Code to Visual Studio 2015
 
Ds white papers_caa_radebyexample
Ds white papers_caa_radebyexampleDs white papers_caa_radebyexample
Ds white papers_caa_radebyexample
 

More from FITC

Designing for Digital Health
Designing for Digital HealthDesigning for Digital Health
Designing for Digital HealthFITC
 
Profiling JavaScript Performance
Profiling JavaScript PerformanceProfiling JavaScript Performance
Profiling JavaScript PerformanceFITC
 
Surviving Your Tech Stack
Surviving Your Tech StackSurviving Your Tech Stack
Surviving Your Tech StackFITC
 
How to Pitch Your First AR Project
How to Pitch Your First AR ProjectHow to Pitch Your First AR Project
How to Pitch Your First AR ProjectFITC
 
Start by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the AnswerStart by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the AnswerFITC
 
Cocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s StoryCocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s StoryFITC
 
Everyday Innovation
Everyday InnovationEveryday Innovation
Everyday InnovationFITC
 
HyperLight Websites
HyperLight WebsitesHyperLight Websites
HyperLight WebsitesFITC
 
Everything is Terrifying
Everything is TerrifyingEverything is Terrifying
Everything is TerrifyingFITC
 
Post-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future HumanPost-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future HumanFITC
 
The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)FITC
 
East of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR GameEast of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR GameFITC
 
Creating a Proactive Healthcare System
Creating a Proactive Healthcare SystemCreating a Proactive Healthcare System
Creating a Proactive Healthcare SystemFITC
 
World Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product DesignWorld Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product DesignFITC
 
The Power of Now
The Power of NowThe Power of Now
The Power of NowFITC
 
High Performance PWAs
High Performance PWAsHigh Performance PWAs
High Performance PWAsFITC
 
Rise of the JAMstack
Rise of the JAMstackRise of the JAMstack
Rise of the JAMstackFITC
 
From Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self DiscoveryFrom Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self DiscoveryFITC
 
Projects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time ForProjects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time ForFITC
 
The Art of Being Bad
The Art of Being BadThe Art of Being Bad
The Art of Being BadFITC
 

More from FITC (20)

Designing for Digital Health
Designing for Digital HealthDesigning for Digital Health
Designing for Digital Health
 
Profiling JavaScript Performance
Profiling JavaScript PerformanceProfiling JavaScript Performance
Profiling JavaScript Performance
 
Surviving Your Tech Stack
Surviving Your Tech StackSurviving Your Tech Stack
Surviving Your Tech Stack
 
How to Pitch Your First AR Project
How to Pitch Your First AR ProjectHow to Pitch Your First AR Project
How to Pitch Your First AR Project
 
Start by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the AnswerStart by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the Answer
 
Cocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s StoryCocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s Story
 
Everyday Innovation
Everyday InnovationEveryday Innovation
Everyday Innovation
 
HyperLight Websites
HyperLight WebsitesHyperLight Websites
HyperLight Websites
 
Everything is Terrifying
Everything is TerrifyingEverything is Terrifying
Everything is Terrifying
 
Post-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future HumanPost-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future Human
 
The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)
 
East of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR GameEast of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR Game
 
Creating a Proactive Healthcare System
Creating a Proactive Healthcare SystemCreating a Proactive Healthcare System
Creating a Proactive Healthcare System
 
World Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product DesignWorld Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product Design
 
The Power of Now
The Power of NowThe Power of Now
The Power of Now
 
High Performance PWAs
High Performance PWAsHigh Performance PWAs
High Performance PWAs
 
Rise of the JAMstack
Rise of the JAMstackRise of the JAMstack
Rise of the JAMstack
 
From Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self DiscoveryFrom Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self Discovery
 
Projects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time ForProjects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time For
 
The Art of Being Bad
The Art of Being BadThe Art of Being Bad
The Art of Being Bad
 

Recently uploaded

The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Alkin Tezuysal
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kitJamie (Taka) Wang
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2DianaGray10
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)IES VE
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationKnoldus Inc.
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...DianaGray10
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxNeo4j
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarThousandEyes
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInThousandEyes
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4DianaGray10
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameKapil Thakar
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfInfopole1
 

Recently uploaded (20)

The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kit
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its application
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? Webinar
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
 

Cut it up

  • 1. Cut it Up Varun Vachhar Director, UI Architecture at Rangle.io ✂️
  • 2. Cut it Up 2 Bundling What is code splitting? Splitting applications Code splitting strategies Optimizing lazy loading Outline 01 02 03 04 05
  • 4. Cut it Up The process of compiling small pieces of code into something larger and more complex, such as a library or application. Bundling 4
  • 5. Cut it Up Task Runners Bundling Used to automate tasks in your development workflow. You can use them to process, concatenate and minify assets of a certain type. 5
  • 6. Cut it Up Used to bundle several modules into one or more optimized bundles for the browser. Most notable bundlers are Webpack, Parcel and Rollup. Bundlers Bundling 6
  • 7. Everything is a Module! ● All files – CSS, HTML, SCSS, PNG, etc. ● ES2015 import statements ● require() statements ● @import statement in stylesheets ● Image url in a stylesheet or HTML Cut it Up Bundling 7
  • 8. Cut it Up Less to Learn CLIs make it easy to create an application that works, right out of the box and generates optimized bundles which are ready to deploy. Bundling ❯ vue create my-project ❯ npx create-react-app my-app ❯ ng new my-project 8
  • 9. Cut it Up Uniqlo Design System Webpack Bundling Loaders 🖨🖨 Transform files into modules Plugins 🔌 Customize or enhance the webpack build process in a variety of ways. module.exports = { entry: '📄 Entry', output: '📦 Output', module: { rules: ['🖨🖨 Loaders'], }, plugins: ['🔌 Plugins'], };
  • 10. 01 02 03 04 05 Cut it Up 10 What Is Code Splitting?
  • 12. * The need for mobile speed: How mobile latency impacts publisher revenue 53%* Of mobile site visits were abandoned if a page took longer than 3 seconds to load. Load Times 12
  • 13. Instead of shipping all the JavaScript to the user on first load, split your bundle into multiple chunks and only send what is necessary at the very beginning. Cut it Up 13 Code Splitting
  • 14. Cut it Up 14 Code Splitting HTML Main JS Chunk CSS Lazy-load chunks as the user navigates chunk #1 chunk #2 chunk #3 interactive
  • 16. Cut it Up 16 import math from './math'; document.getElementById('#calculate') .addEventListener('click', e => { e.preventDefault(); math.calculateResult(); }); Static Imports main.js
  • 17. Cut it Up 17 Dynamic Imports document.getElementById('#calculate') .addEventListener('click', e => { e.preventDefault(); import('./math').then(math => { math.calculateResult(); }); }); main.js math.js
  • 18. When Webpack comes across the import() syntax, it automatically starts code-splitting your app. Cut it Up Code Splitting 18
  • 19. Cut it Up 19 Static Components — React import Photos from './Photos'; const Album = ( <div> <Photos /> </div> );
  • 20. Cut it Up 20 Async Components — React const Photos = React.lazy(() => import('./Photos')); const Album = ( <div> <Photos /> </div> );
  • 21. Cut it Up 21 Async Components — Vue <template> <div> <album></album> </div> </template> <script> export default { components: { album: () => import('./Album') } }; </script>
  • 23. Cut it Up Code splitting requires a bit of extra effort as you have to decide what and where to split. Bundling 23
  • 24. Cut it Up Great option to get started with code- splitting. Break the application into chunks per route, and then load that chunk when the user navigates to that route. Route Based Code Splitting Strategies 24 about.js blog.jsmain.js home.js
  • 25. const Home = React.lazy(() => import('./Home')); const About = React.lazy(() => import('./About')); const Blog = React.lazy(() => import('./Blog)); 25 Route Based Code-Splitting — React const App = () => ( <Router> <React.Suspense fallback={<div>Loading...</div>}> <Switch> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> <Route path="/blog" component={Blog}/> </Switch> </React.Suspense> </Router> );
  • 26. 26 const Home = () => ({ component: import('./Home'), loading: Loader }); const About = () => ({ component: import('./About'), loading: Loader }); const Blog = () => ({ component: import('./Blog), loading: Loader }); const router = new VueRouter({ routes: [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '/blog, component: Blog }, ], }); Route Based Code-Splitting — Vue
  • 27. Cut it Up Chunk Dependencies 28
  • 28. Cut it Up Automatically identifies modules which should be split and avoids duplicated dependencies across chunks. Split Chunks Plugin Code Splitting Strategies 29 optimization: { splitChunks: { chunks: 'all', name: false, } }
  • 29. Chunks are code which is broken apart from main bundle into their own files. ● Vendor — dependency code coming from node_modules ● Common — code which is shared between different chunks ● Async — code which can be lazy-loaded Cut it Up Chunks 30
  • 30. Cut it Up Split components that load content on demand or are hidden by default — Tabs, Modals and Alerts On-demand Content Code Splitting Strategies 31
  • 31. Cut it Up Multi-step features such as checkout flows which continue based clicks should be split per step. Isolate Process Flows Code Splitting Strategies 32
  • 33. Cut it Up A browser mechanism that prefetches documents that the user might visit in the near future Prefetch Optimizing Lazy Loading 34
  • 34. Cut it Up Detects visibility of an element Intersection Observer Optimizing Lazy Loading 35
  • 35. from Faster Page-Loads by Chidume Nnamdi Optimistically & Idly Prefetch Resources An IntersectionObserver is registered for all links Waits until the browser is idle Prefetches URLs to the links Optimizing Lazy Loading 36
  • 36. Cut it Up Or, use Quicklink github.com/GoogleChromeLabs/quicklink Optimizing Lazy Loading 37
  • 37. Cut it Up 01 Your app was likely bootstrapped using a CLI and using webpack for bundling. Summary 38 02 Do enable route based code-splitting and consider splitting on-demand components. 03 Leverage the Split Chunks Plugin to avoid duplication of code across chunks. 04 Optimistically and idly prefetch the split chunks.
  • 39. Cut it Up Rangle.io

Editor's Notes

  1. How many of you work build apps or websites with JS on a daily basis? How many of you rely on webpack as a build tool?
  2. Bundling is the process of combining and optimizing multiple modules into one or more production ready bundles. Modules as in JS modules — essentially multiple files
  3. Such as Grunt and Gulp Manually control the order Fairly rudimentary approach
  4. Webpack Parcel Dependency graph which maps every module your project needs and generates one or more bundles.
  5. Treat everything as a module Loaders — transform files into modules
  6. Most major JS frameworks now have CLIs Set up build tooling for you They all use webpack Less for you to learn
  7. You don’t need to be an expert in webpack CLIs do the heavy lifting Just a rough understanding of how build tools work Going to be focusing on webpack in this talk but, same concepts apply to parcel
  8. What exactly is code splitting and why should you care about it
  9. This was our approach to shipping JS. Didn’t consider if the user can handle that or not Sending large JavaScript payloads impacts the speed of your site significantly.
  10. On desktop 50% of users are likely to abandon if site doesn’t load in 2 seconds https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/research-data/need-mobile-speed-how-mobile-latency-impacts-publisher-revenue/
  11. As the user navigates the app asynchronously loads chunks of JS
  12. Reduce JavaScript payloads with code-splitting
  13. Fairly common to work with JS modules Import syntax to import code from one module to another Here the code for math.js will just be included in the main.js bundle
  14. Bundlers support another syntax — dynamic import Import as a function Asynchronous, returns a promise Here math.js is a chunk — loaded asynchronously when this code is executed
  15. You don’t need to do anything else
  16. Use dynamic import + React.lazy to turn a regular component into an async component Webpack will code-split it out into its own chunk We can use the Async component just like a regular component
  17. Supports async components without the need of any utility
  18. Different types of code-splitting and how you can apply it to your work
  19. Building a blog with home, about and blog pages
  20. Suspense lets components “wait” for something before rendering. While waiting or in case of failure render fallback
  21. Loading just like suspense. Can even give fallback components for error states
  22. What about shared dependency code? Eg react is used by all these chunks — is it duplicated? Not a good option — we are splitting but, now shipping more code than we need to Webpack allows you to generate common or vendor chunks
  23. Add the following to your webpack config As long as your dependencies remain the same, the chunk name is consistent. Which means you can cache it! Again, this is something you get for free if you use CLI The plugin gives you a lot of options to control how chunks are generated and how large they can be
  24. Why load step 10 when the user is just viewing step 2 of the flow The code that makes up the module does not get included into the initial bundle and is now lazy loaded, or provided to the user only when it is needed after the form submission. To further improve page performance, preload critical chunks to prioritize and fetch them sooner. link rel="prefetch"
  25. We’ve split our application into chunks, but how do we load these chunks in the most optimal way
  26. Use it to load chunks that you know a lot of users request Doesn’t impact initial load time
  27. Detect whether an element is visible in the viewport or not Does it in a very performant way!
  28. Combining these two APIs we can… As those links scroll into the view you trigger prefetch for that url https://blog.bitsrc.io/faster-page-loads-by-prefetching-links-during-idle-time-5abe42dacf9 https://www.gatsbyjs.org/blog/2019-04-02-behind-the-scenes-what-makes-gatsby-great/#route-based-code-splitting