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
Top comments (9)
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.
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?
@varunprashar5 Does not seems very optimized way to find used code. Linters can do better job.
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.
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.
Exactly 100% correct. So your 10 MB bundle will not be required on your home screen but may be only 100 KB.
Then why not split the code in such a way in first place only.
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.
Yes thats true and its quite intense. My next post is on this only :D