Coverage in tab network

i was reading about coverage metrics and how can i use it for optimizing my Next or React application by reducing the unused bytes.i think when i wanna start recording the coverage i should start the instrument coverage after loading my page not before loading, and as i understand i should like try to record in each page and interact in it separately,not navigating and interacting with mulitple page or it i will be hard to optimize them all in the same time (plz correct for me if im wrong).

i open home page and i started recording the coverage , the final result is below

as i understand here react-icons/bs 100% is unused but it appears in the coverage as i undestand it should not appear here or it’s ok but i should reduce it , idk how much should i reduce to in %

webpack-internal:///(app-pages-browser)/./node_modules/react-icons/bs
/index.mjs
JS (per block)  6,243,457   6,242,473100%   
webpack-internal:///(app-pages-browser

i tried to see in register page if im using this icon and i found it so what i did is :
instead of only importing it like this directly
import { BsEyeSlash, BsEye } from "react-icons/bs";

i used dynamic function from next to import it

const BsEye = dynamic(() => import("react-icons/bs").then((mod) => mod.BsEye), {
  ssr: false,
});
const BsEyeSlash = dynamic(
  () => import("react-icons/bs").then((mod) => mod.BsEyeSlash),
  { ssr: false }
);

the result is in the image above is the same ..

You need to sign in to view this answers