CODEWITHSUNDEEP
reactjsnext.jstimeimportmeasure
Kai Brooks
Kai Brooks

Reputation: 42

How can I measure the time it takes to import a module in a React component, or what tool can I use to measure it?

I am working on a project that uses Next.js for the frontend and Node.js for the backend, with Auth0 handling authentication and authorization. I have configured Auth0 to redirect users to a callback page after login.

The callback page is a client-side page that redirects users to the appropriate page based on their authorization. However, I’ve noticed that the callback page sometimes takes a long time to redirect. After thorough testing, I discovered that this delay mainly occurs when the browser cache is empty. Additionally, this issue only happens in the production (build) environment, whereas in the development environment, the redirection is fast.

I captured a console log at the point where the callback page redirects to the user page. The callback code is as follows:

export default function Callback({ searchParams }: { searchParams: SearchParams }) {
    const router = useRouter();
    console.log('callback=>cycle')
    const accessTokenExist = async (token: string) => {
        let ServiceResponse: any = await getUserWithToken(token); 
        
        if (ServiceResponse.data !== undefined) {
            let Data: any = ServiceResponse.data;
            console.log('callback=>', new Date());
            switch (Data.role) {
                case 'admin':
                    return router.push('/admin');
                case 'user':
                    return router.push('/user');;
            }
        }
    };
    useEffect(() => {
          if (searchParams?.accessToken !== undefined)
              accessTokenExist(searchParams.accessToken);  
    },[searchParams.accessToken])
    return (
        <div>
            <Spinner text={'Loading...'} />
        </div>
    );
}

And I also captured the console log from the user page. The captured console log is as follows: enter image description here

The user page imports many modules, and I suspect that one of these modules may have a bug. I want to measure the import time of each module to identify which one is taking a long time to load.

Could you help me? How can I measure the time it takes to import a module in a React component, or what tools can I use for this?

Upvotes: 0

Views: 29

Answers (0)

Related Questions