Avoid bundle bloating by being bundlephobic
currentSpeaker().getIntro();
{
name: "Syed M. Taha",
organization: "Loops Digital",
designation: "Senior Software Engineer",
twitter: "twitter.com/smtaha512",
email: "s.m.taha10@gmail.com"
}What is a bundle?
A bundle is a file that have your (JavaScript) code and your dependencies included.
What is bundle bloating?
Waiting for app to be fully loaded
Why bundle size matters?
Relationship b/w each byte transferred to time
Assets and code shipped to users:
- HTML
- CSS
- JS
- Images etc
A 200 KB script and a 200 KB image have very different costs
According to bundlephobia.com class-validator adds 631.3kB
to bundle size and 2.58s to page load time
Phobia Fact:
Analyzing bundle size
webpack-bundle-analyzer
Build the application with stats
$ ng build --stats-jsonRun analyzer
$ webpack-bundle-analyzer ./www/stats.json
How to reduce bundle size?
Dead code elimination
Tree-shaking
Classes are not tree shakable while functions are
Phobia Tip
Always check library size before adding it
Phobia Tip
Phobia Tip
Importing libraries
// libs/lodash.js
export { default as isEmpty } from 'lodash/isEmpty';
export { default as flattenDeep } from 'lodash/flattenDeep';
// some-component.js
import * as lodash from 'libs/lodash';
// or
import { isEmpty } from 'libs/lodash';Lazy loading
Types of fetching in lazy loading
Fetching on navigation
Prefetching
Prefetching everything
Simplest and usually default
Prefetching visible links
Intersection Observer API
Image credits: David Walsh
Prefetching using data analysis
ML / Guess.js
Budgeting the applications
...,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "main",
"maximumWarning": "100kb",
"maximumError": "250"
}
],
...Budgets in angular
One of the productive days is throwing away a thousand lines of code.
-Ken Thompson
Thank you
Special Thanks
Saad Abbasi - @isaadabbasi
https://slides.com/smtaha512/
Avoid Bundle bloating by being bundle phobic
By Syed M. Taha
