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
Leave feedback about this