最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

reactjs - 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? - S

programmeradmin0浏览0评论

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?

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论