From 5b9332c67373d96e716740127898cd2c3c17f725 Mon Sep 17 00:00:00 2001
From: archer <545436317@qq.com>
Date: Sat, 9 Sep 2023 09:39:54 +0800
Subject: [PATCH] perf: script load

---
 client/src/components/ChatBox/index.tsx |   3 +
 client/src/pages/_app.tsx               |  16 +--
 client/src/pages/account/index.tsx      |  92 +++++++------
 client/src/pages/kb/detail/index.tsx    | 174 ++++++++++++------------
 client/src/pages/login/index.tsx        | 120 ++++++++--------
 client/src/types/index.d.ts             |   1 -
 6 files changed, 206 insertions(+), 200 deletions(-)

diff --git a/client/src/components/ChatBox/index.tsx b/client/src/components/ChatBox/index.tsx
index 86b8255b7..2bbbcfaba 100644
--- a/client/src/components/ChatBox/index.tsx
+++ b/client/src/components/ChatBox/index.tsx
@@ -55,6 +55,7 @@ const SelectDataset = dynamic(() => import('./SelectDataset'));
 const InputDataModal = dynamic(() => import('@/pages/kb/detail/components/InputDataModal'));
 
 import styles from './index.module.scss';
+import Script from 'next/script';
 
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 24);
 
@@ -535,6 +536,8 @@ const ChatBox = (
 
   return (
     <Flex flexDirection={'column'} h={'100%'}>
+      <Script src="/js/html2pdf.bundle.min.js" strategy="lazyOnload"></Script>
+
       <Box ref={ChatBoxRef} flex={'1 0 0'} h={0} w={'100%'} overflow={'overlay'} px={[4, 0]} pb={3}>
         <Box id="chat-container" maxW={['100%', '92%']} h={'100%'} mx={'auto'}>
           {showEmpty && <Empty />}
diff --git a/client/src/pages/_app.tsx b/client/src/pages/_app.tsx
index 65491bc40..64fba807b 100644
--- a/client/src/pages/_app.tsx
+++ b/client/src/pages/_app.tsx
@@ -41,16 +41,14 @@ function App({ Component, pageProps }: AppProps) {
   const { setLastRoute } = useGlobalStore();
 
   const [scripts, setScripts] = useState<FeConfigsType['scripts']>([]);
-  const [googleClientVerKey, setGoogleVerKey] = useState<string>();
 
   useEffect(() => {
     // get init data
     (async () => {
       const {
-        feConfigs: { scripts, googleClientVerKey }
+        feConfigs: { scripts }
       } = await clientInitData();
       setScripts(scripts || []);
-      setGoogleVerKey(googleClientVerKey);
     })();
     // add window error track
     window.onerror = function (msg, url) {
@@ -94,20 +92,10 @@ function App({ Component, pageProps }: AppProps) {
         />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <Script src="/js/qrcode.min.js" strategy="lazyOnload"></Script>
-      <Script src="/js/pdf.js" strategy="lazyOnload"></Script>
-      <Script src="/js/html2pdf.bundle.min.js" strategy="lazyOnload"></Script>
       {scripts?.map((item, i) => (
         <Script key={i} strategy="lazyOnload" {...item}></Script>
       ))}
-      {googleClientVerKey && (
-        <>
-          <Script
-            src={`https://www.recaptcha.net/recaptcha/api.js?render=${googleClientVerKey}`}
-            strategy="lazyOnload"
-          ></Script>
-        </>
-      )}
+
       <QueryClientProvider client={queryClient}>
         <ChakraProvider theme={theme}>
           <ColorModeScript initialColorMode={theme.config.initialColorMode} />
diff --git a/client/src/pages/account/index.tsx b/client/src/pages/account/index.tsx
index d46dd0d21..d15bafecc 100644
--- a/client/src/pages/account/index.tsx
+++ b/client/src/pages/account/index.tsx
@@ -13,6 +13,7 @@ import UserInfo from './components/Info';
 import { serviceSideProps } from '@/utils/i18n';
 import { feConfigs } from '@/store/static';
 import { useTranslation } from 'react-i18next';
+import Script from 'next/script';
 
 const Promotion = dynamic(() => import('./components/Promotion'));
 const BillTable = dynamic(() => import('./components/BillTable'));
@@ -97,51 +98,54 @@ const Account = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
   );
 
   return (
-    <PageContainer>
-      <Flex flexDirection={['column', 'row']} h={'100%'} pt={[4, 0]}>
-        {isPc ? (
-          <Flex
-            flexDirection={'column'}
-            p={4}
-            h={'100%'}
-            flex={'0 0 200px'}
-            borderRight={theme.borders.base}
-          >
-            <SideTabs
-              flex={1}
-              mx={'auto'}
-              mt={2}
-              w={'100%'}
-              list={tabList.current}
-              activeId={currentTab}
-              onChange={setCurrentTab}
-            />
-          </Flex>
-        ) : (
-          <Box mb={3}>
-            <Tabs
-              m={'auto'}
-              size={isPc ? 'md' : 'sm'}
-              list={tabList.current.map((item) => ({
-                id: item.id,
-                label: item.label
-              }))}
-              activeId={currentTab}
-              onChange={setCurrentTab}
-            />
-          </Box>
-        )}
+    <>
+      <Script src="/js/qrcode.min.js" strategy="lazyOnload"></Script>
+      <PageContainer>
+        <Flex flexDirection={['column', 'row']} h={'100%'} pt={[4, 0]}>
+          {isPc ? (
+            <Flex
+              flexDirection={'column'}
+              p={4}
+              h={'100%'}
+              flex={'0 0 200px'}
+              borderRight={theme.borders.base}
+            >
+              <SideTabs
+                flex={1}
+                mx={'auto'}
+                mt={2}
+                w={'100%'}
+                list={tabList.current}
+                activeId={currentTab}
+                onChange={setCurrentTab}
+              />
+            </Flex>
+          ) : (
+            <Box mb={3}>
+              <Tabs
+                m={'auto'}
+                size={isPc ? 'md' : 'sm'}
+                list={tabList.current.map((item) => ({
+                  id: item.id,
+                  label: item.label
+                }))}
+                activeId={currentTab}
+                onChange={setCurrentTab}
+              />
+            </Box>
+          )}
 
-        <Box flex={'1 0 0'} h={'100%'} pb={[4, 0]}>
-          {currentTab === TabEnum.info && <UserInfo />}
-          {currentTab === TabEnum.promotion && <Promotion />}
-          {currentTab === TabEnum.bill && <BillTable />}
-          {currentTab === TabEnum.pay && <PayRecordTable />}
-          {currentTab === TabEnum.inform && <InformTable />}
-        </Box>
-      </Flex>
-      <ConfirmModal />
-    </PageContainer>
+          <Box flex={'1 0 0'} h={'100%'} pb={[4, 0]}>
+            {currentTab === TabEnum.info && <UserInfo />}
+            {currentTab === TabEnum.promotion && <Promotion />}
+            {currentTab === TabEnum.bill && <BillTable />}
+            {currentTab === TabEnum.pay && <PayRecordTable />}
+            {currentTab === TabEnum.inform && <InformTable />}
+          </Box>
+        </Flex>
+        <ConfirmModal />
+      </PageContainer>
+    </>
   );
 };
 
diff --git a/client/src/pages/kb/detail/index.tsx b/client/src/pages/kb/detail/index.tsx
index 9e65d2784..722d50274 100644
--- a/client/src/pages/kb/detail/index.tsx
+++ b/client/src/pages/kb/detail/index.tsx
@@ -23,6 +23,7 @@ import { getTrainingQueueLen } from '@/api/plugins/kb';
 import MyTooltip from '@/components/MyTooltip';
 import { QuestionOutlineIcon } from '@chakra-ui/icons';
 import { feConfigs } from '@/store/static';
+import Script from 'next/script';
 
 const ImportData = dynamic(() => import('./components/Import'), {
   ssr: false
@@ -89,96 +90,99 @@ const Detail = ({ kbId, currentTab }: { kbId: string; currentTab: `${TabEnum}` }
   });
 
   return (
-    <PageContainer>
-      <Box display={['block', 'flex']} h={'100%'} pt={[4, 0]}>
-        {isPc ? (
-          <Flex
-            flexDirection={'column'}
-            p={4}
-            h={'100%'}
-            flex={'0 0 200px'}
-            borderRight={theme.borders.base}
-          >
-            <Flex mb={4} alignItems={'center'}>
-              <Avatar src={kbDetail.avatar} w={'34px'} borderRadius={'lg'} />
-              <Box ml={2} fontWeight={'bold'}>
-                {kbDetail.name}
-              </Box>
-            </Flex>
-            <SideTabs
-              flex={1}
-              mx={'auto'}
-              mt={2}
-              w={'100%'}
-              list={tabList.current}
-              activeId={currentTab}
-              onChange={(e: any) => {
-                setCurrentTab(e);
-              }}
-            />
-            <Box textAlign={'center'}>
-              <Flex justifyContent={'center'} alignItems={'center'}>
-                <MyIcon mr={1} name="overviewLight" w={'16px'} color={'green.500'} />
-                <Box>{t('dataset.System Data Queue')}</Box>
-                <MyTooltip
-                  label={t('dataset.Queue Desc', { title: feConfigs?.systemTitle })}
-                  placement={'top'}
-                >
-                  <QuestionOutlineIcon ml={1} w={'16px'} />
-                </MyTooltip>
-              </Flex>
-              <Box mt={1} fontWeight={'bold'}>
-                {trainingQueueLen}
-              </Box>
-            </Box>
+    <>
+      <Script src="/js/pdf.js" strategy="lazyOnload"></Script>
+      <PageContainer>
+        <Box display={['block', 'flex']} h={'100%'} pt={[4, 0]}>
+          {isPc ? (
             <Flex
-              alignItems={'center'}
-              cursor={'pointer'}
-              py={2}
-              px={3}
-              borderRadius={'md'}
-              _hover={{ bg: 'myGray.100' }}
-              onClick={() => router.back()}
+              flexDirection={'column'}
+              p={4}
+              h={'100%'}
+              flex={'0 0 200px'}
+              borderRight={theme.borders.base}
             >
-              <IconButton
-                mr={3}
-                icon={<MyIcon name={'backFill'} w={'18px'} color={'myBlue.600'} />}
-                bg={'white'}
-                boxShadow={'1px 1px 9px rgba(0,0,0,0.15)'}
-                h={'28px'}
-                size={'sm'}
-                borderRadius={'50%'}
-                aria-label={''}
+              <Flex mb={4} alignItems={'center'}>
+                <Avatar src={kbDetail.avatar} w={'34px'} borderRadius={'lg'} />
+                <Box ml={2} fontWeight={'bold'}>
+                  {kbDetail.name}
+                </Box>
+              </Flex>
+              <SideTabs
+                flex={1}
+                mx={'auto'}
+                mt={2}
+                w={'100%'}
+                list={tabList.current}
+                activeId={currentTab}
+                onChange={(e: any) => {
+                  setCurrentTab(e);
+                }}
               />
-              全部知识库
+              <Box textAlign={'center'}>
+                <Flex justifyContent={'center'} alignItems={'center'}>
+                  <MyIcon mr={1} name="overviewLight" w={'16px'} color={'green.500'} />
+                  <Box>{t('dataset.System Data Queue')}</Box>
+                  <MyTooltip
+                    label={t('dataset.Queue Desc', { title: feConfigs?.systemTitle })}
+                    placement={'top'}
+                  >
+                    <QuestionOutlineIcon ml={1} w={'16px'} />
+                  </MyTooltip>
+                </Flex>
+                <Box mt={1} fontWeight={'bold'}>
+                  {trainingQueueLen}
+                </Box>
+              </Box>
+              <Flex
+                alignItems={'center'}
+                cursor={'pointer'}
+                py={2}
+                px={3}
+                borderRadius={'md'}
+                _hover={{ bg: 'myGray.100' }}
+                onClick={() => router.back()}
+              >
+                <IconButton
+                  mr={3}
+                  icon={<MyIcon name={'backFill'} w={'18px'} color={'myBlue.600'} />}
+                  bg={'white'}
+                  boxShadow={'1px 1px 9px rgba(0,0,0,0.15)'}
+                  h={'28px'}
+                  size={'sm'}
+                  borderRadius={'50%'}
+                  aria-label={''}
+                />
+                全部知识库
+              </Flex>
             </Flex>
-          </Flex>
-        ) : (
-          <Box mb={3}>
-            <Tabs
-              m={'auto'}
-              w={'260px'}
-              size={isPc ? 'md' : 'sm'}
-              list={tabList.current.map((item) => ({
-                id: item.id,
-                label: item.label
-              }))}
-              activeId={currentTab}
-              onChange={(e: any) => setCurrentTab(e)}
-            />
-          </Box>
-        )}
+          ) : (
+            <Box mb={3}>
+              <Tabs
+                m={'auto'}
+                w={'260px'}
+                size={isPc ? 'md' : 'sm'}
+                list={tabList.current.map((item) => ({
+                  id: item.id,
+                  label: item.label
+                }))}
+                activeId={currentTab}
+                onChange={(e: any) => setCurrentTab(e)}
+              />
+            </Box>
+          )}
 
-        {!!kbDetail._id && (
-          <Box flex={'1 0 0'} h={'100%'} pb={[4, 0]}>
-            {currentTab === TabEnum.data && <DataCard kbId={kbId} />}
-            {currentTab === TabEnum.import && <ImportData kbId={kbId} />}
-            {currentTab === TabEnum.test && <Test kbId={kbId} />}
-            {currentTab === TabEnum.info && <Info ref={InfoRef} kbId={kbId} form={form} />}
-          </Box>
-        )}
-      </Box>
-    </PageContainer>
+          {!!kbDetail._id && (
+            <Box flex={'1 0 0'} h={'100%'} pb={[4, 0]}>
+              {currentTab === TabEnum.data && <DataCard kbId={kbId} />}
+              {currentTab === TabEnum.import && <ImportData kbId={kbId} />}
+              {currentTab === TabEnum.test && <Test kbId={kbId} />}
+              {currentTab === TabEnum.info && <Info ref={InfoRef} kbId={kbId} form={form} />}
+            </Box>
+          )}
+        </Box>
+      </PageContainer>
+    </>
   );
 };
 
diff --git a/client/src/pages/login/index.tsx b/client/src/pages/login/index.tsx
index 88078bedc..97364ec5e 100644
--- a/client/src/pages/login/index.tsx
+++ b/client/src/pages/login/index.tsx
@@ -13,6 +13,7 @@ import { serviceSideProps } from '@/utils/i18n';
 import { setToken } from '@/utils/user';
 import { feConfigs } from '@/store/static';
 import CommunityModal from '@/components/CommunityModal';
+import Script from 'next/script';
 const RegisterForm = dynamic(() => import('./components/RegisterForm'));
 const ForgetPasswordForm = dynamic(() => import('./components/ForgetPasswordForm'));
 
@@ -53,70 +54,77 @@ const Login = () => {
   }
 
   return (
-    <Flex
-      alignItems={'center'}
-      justifyContent={'center'}
-      className={styles.loginPage}
-      h={'100%'}
-      px={[0, '10vw']}
-    >
+    <>
+      {feConfigs.googleClientVerKey && (
+        <Script
+          src={`https://www.recaptcha.net/recaptcha/api.js?render=${feConfigs.googleClientVerKey}`}
+        ></Script>
+      )}
       <Flex
-        height="100%"
-        w={'100%'}
-        maxW={'1240px'}
-        maxH={['auto', 'max(660px,80vh)']}
-        backgroundColor={'#fff'}
         alignItems={'center'}
         justifyContent={'center'}
-        py={[5, 10]}
-        px={'5vw'}
-        borderRadius={isPc ? 'md' : 'none'}
-        gap={5}
+        className={styles.loginPage}
+        h={'100%'}
+        px={[0, '10vw']}
       >
-        {isPc && (
-          <Image
-            src={'/icon/loginLeft.svg'}
-            order={pageType === PageTypeEnum.login ? 0 : 2}
-            flex={'1 0 0'}
-            w="0"
-            maxW={'600px'}
-            height={'100%'}
-            maxH={'450px'}
-            alt=""
-          />
-        )}
-
-        <Box
-          position={'relative'}
-          order={1}
-          flex={`0 0 ${isPc ? '400px' : '100%'}`}
-          height={'100%'}
-          border="1px"
-          borderColor="gray.200"
-          py={5}
-          px={10}
+        <Flex
+          height="100%"
+          w={'100%'}
+          maxW={'1240px'}
+          maxH={['auto', 'max(660px,80vh)']}
+          backgroundColor={'#fff'}
+          alignItems={'center'}
+          justifyContent={'center'}
+          py={[5, 10]}
+          px={'5vw'}
           borderRadius={isPc ? 'md' : 'none'}
+          gap={5}
         >
-          <DynamicComponent type={pageType} />
-
-          {feConfigs?.show_contact && (
-            <Box
-              fontSize={'sm'}
-              color={'myGray.600'}
-              cursor={'pointer'}
-              position={'absolute'}
-              right={5}
-              bottom={3}
-              onClick={onOpen}
-            >
-              无法登录，点击联系
-            </Box>
+          {isPc && (
+            <Image
+              src={'/icon/loginLeft.svg'}
+              order={pageType === PageTypeEnum.login ? 0 : 2}
+              flex={'1 0 0'}
+              w="0"
+              maxW={'600px'}
+              height={'100%'}
+              maxH={'450px'}
+              alt=""
+            />
           )}
-        </Box>
-      </Flex>
 
-      {isOpen && <CommunityModal onClose={onClose} />}
-    </Flex>
+          <Box
+            position={'relative'}
+            order={1}
+            flex={`0 0 ${isPc ? '400px' : '100%'}`}
+            height={'100%'}
+            border="1px"
+            borderColor="gray.200"
+            py={5}
+            px={10}
+            borderRadius={isPc ? 'md' : 'none'}
+          >
+            <DynamicComponent type={pageType} />
+
+            {feConfigs?.show_contact && (
+              <Box
+                fontSize={'sm'}
+                color={'myGray.600'}
+                cursor={'pointer'}
+                position={'absolute'}
+                right={5}
+                bottom={3}
+                onClick={onOpen}
+              >
+                无法登录，点击联系
+              </Box>
+            )}
+          </Box>
+        </Flex>
+
+        {isOpen && <CommunityModal onClose={onClose} />}
+      </Flex>
+    </>
   );
 };
 
diff --git a/client/src/types/index.d.ts b/client/src/types/index.d.ts
index 045228e0e..8e32f4dc4 100644
--- a/client/src/types/index.d.ts
+++ b/client/src/types/index.d.ts
@@ -58,7 +58,6 @@ declare global {
 
   interface Window {
     ['pdfjs-dist/build/pdf']: any;
-    particlesJS: any;
     grecaptcha: any;
     QRCode: any;
     umami?: {