DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
varunprashar5
varunprashar5

Posted on

๐—›๐—ผ๐˜„ ๐˜๐—ผ ๐—ณ๐—ถ๐—ป๐—ฑ "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

Top comments (10)

Collapse
 
codingsafari profile image
Nico Braun • Edited on

This problem is commonly solved by a technique called tree shaking.

Collapse
 
varunprashar5 profile image
varunprashar5 Author

Yes thats true and its quite intense. My next post is on this only :D

Collapse
 
badpractice profile image
Bad Practice

I've never used it before because I never needed to, but for those using JetBrains apps, you've probably seen this option before. It will sort/reorder on top of removing unused imports throughout the directory that you choose if not your entire project.

Collapse
 
varunprashar5 profile image
varunprashar5 Author

but its only for unused imports ..what about the same file where few methods are there even they are called based on events but on your page load they are not required to be there?
What if there is a style tag with some css and only few css is used and rest is just there present in the file as it is?

Collapse
 
vishalraj82 profile image
Vishal Raj

@varunprashar5 Does not seems very optimized way to find used code. Linters can do better job.

Collapse
 
varunprashar5 profile image
varunprashar5 Author

Then you have not understood the concept properly. It is not like "variable is delcared but not defined."

It is saying that you current page actually requires 20% of the code but is actually loading 100%.
So what you can do is lazily load few modules based on the user events which will give faster initial loads to your application.

Collapse
 
salmin profile image
Salmin Skenderovic

The advantage of using this tool would be that you can do a page-refresh on a single page and see how much that specific page can gain from code-splitting and lazy loading.

Collapse
 
varunprashar5 profile image
varunprashar5 Author

Exactly 100% correct. So your 10 MB bundle will not be required on your home screen but may be only 100 KB.

Thread Thread
 
vishalraj82 profile image
Vishal Raj

Then why not split the code in such a way in first place only.

Thread Thread
 
varunprashar5 profile image
varunprashar5 Author

This can not realistic to be done in first place. You will first diagnose and then act on it. Thats why refactoring phase is there.

"I made 10x faster JSON.stringify() functions, even type safe"

โ˜๏ธ Must read for JS devs