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-json

Run 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

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/