๐๐ผ๐ ๐๐ผ ๐ณ๐ถ๐ป๐ฑ "UNUSED' ๐๐๐ฉ๐๐ฆ๐๐ฅ๐๐ฃ๐ง ๐ฎ๐ป๐ฑ ๐๐ฆ๐ฆ ๐ฐ๐ผ๐ฑ๐ฒ ๐ผ๐ป ๐๐ผ๐๐ฟ ๐ฝ๐ฎ๐ด๐ฒ? ๐ค
varunprashar5
Posted on June 17, 2021
You can find it using Chrome via "Dev Tools" ๐
- Open dev tools (F12)
- Type: Ctrl + Shift + P
- Type: "Coverage" and select "show coverage" from the result.
- New window with the "Coverage" tab will be shown
- 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"
๐จ๐๐ฎ๐ด๐ฒ ๐ฉ๐ถ๐๐๐ฎ๐น๐ถ๐๐ฎ๐๐ถ๐ผ๐ป:
- Red section of the bar is unused bytes
- 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
Posted on June 17, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.