๐—›๐—ผ๐˜„ ๐˜๐—ผ ๐—ณ๐—ถ๐—ป๐—ฑ "UNUSED' ๐—๐—”๐—ฉ๐—”๐—ฆ๐—–๐—ฅ๐—œ๐—ฃ๐—ง ๐—ฎ๐—ป๐—ฑ ๐—–๐—ฆ๐—ฆ ๐—ฐ๐—ผ๐—ฑ๐—ฒ ๐—ผ๐—ป ๐˜†๐—ผ๐˜‚๐—ฟ ๐—ฝ๐—ฎ๐—ด๐—ฒ? ๐Ÿค”

varunprashar5

varunprashar5

Posted on June 17, 2021

๐—›๐—ผ๐˜„ ๐˜๐—ผ ๐—ณ๐—ถ๐—ป๐—ฑ "UNUSED' ๐—๐—”๐—ฉ๐—”๐—ฆ๐—–๐—ฅ๐—œ๐—ฃ๐—ง ๐—ฎ๐—ป๐—ฑ ๐—–๐—ฆ๐—ฆ ๐—ฐ๐—ผ๐—ฑ๐—ฒ ๐—ผ๐—ป ๐˜†๐—ผ๐˜‚๐—ฟ ๐—ฝ๐—ฎ๐—ด๐—ฒ? ๐Ÿค”

You can find it using Chrome via "Dev Tools" ๐Ÿ˜Š

  1. Open dev tools (F12)
  2. Type: Ctrl + Shift + P
  3. Type: "Coverage" and select "show coverage" from the result.
  4. New window with the "Coverage" tab will be shown
  5. Click Icon "Start Instrumenting Coverage And Reload Page"

So it will reload the page and show the information in the table
with "Url", "Type", "UnusedBytes", "Usage Visualization"

Alt Text

๐—จ๐˜€๐—ฎ๐—ด๐—ฒ ๐—ฉ๐—ถ๐˜€๐˜‚๐—ฎ๐—น๐—ถ๐˜‡๐—ฎ๐˜๐—ถ๐—ผ๐—ป:

  1. Red section of the bar is unused bytes
  2. Green section is used bytes.

๐—ฆ๐—ผ ๐˜„๐—ต๐—ฎ๐˜ ๐˜๐—ต๐—ฒ ๐—ป๐—ฒ๐˜…๐˜ ๐˜€๐˜๐—ฒ๐—ฝ? ๐Ÿคจ
Refactoring your codebase so that each page only ships the Javascript and CSS that it needs (this can be a tricky part ๐Ÿ™ƒ)

Do share your thoughts and other suggestions in the comments

๐Ÿ’– ๐Ÿ’ช ๐Ÿ™… ๐Ÿšฉ
varunprashar5
varunprashar5

Posted on June 17, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Menu Animation in Action
javascript Menu Animation in Action

June 8, 2024

Dark light mode toggle
javascript Dark light mode toggle

March 19, 2023

Why CSS-in-JS?
javascript Why CSS-in-JS?

May 30, 2022

Closures in JavaScript - The easy way
javascript Closures in JavaScript - The easy way

December 5, 2021

ยฉ TheLazy.dev

About