DEV Community

loading...

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

varunprashar5
ใƒป1 min read

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

Discussion (10)

Collapse
codingsafari profile image
Nico Braun • Edited

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.