perf: script load

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 />}

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} />

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,6 +98,8 @@ const Account = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
   );
 
   return (
+    <>
+      <Script src="/js/qrcode.min.js" strategy="lazyOnload"></Script>
       <PageContainer>
         <Flex flexDirection={['column', 'row']} h={'100%'} pt={[4, 0]}>
           {isPc ? (
@@ -142,6 +145,7 @@ const Account = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
         </Flex>
         <ConfirmModal />
       </PageContainer>
+    </>
   );
 };
 

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,6 +90,8 @@ const Detail = ({ kbId, currentTab }: { kbId: string; currentTab: `${TabEnum}` }
   });
 
   return (
+    <>
+      <Script src="/js/pdf.js" strategy="lazyOnload"></Script>
       <PageContainer>
         <Box display={['block', 'flex']} h={'100%'} pt={[4, 0]}>
           {isPc ? (
@@ -179,6 +182,7 @@ const Detail = ({ kbId, currentTab }: { kbId: string; currentTab: `${TabEnum}` }
           )}
         </Box>
       </PageContainer>
+    </>
   );
 };
 

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,6 +54,12 @@ const Login = () => {
   }
 
   return (
+    <>
+      {feConfigs.googleClientVerKey && (
+        <Script
+          src={`https://www.recaptcha.net/recaptcha/api.js?render=${feConfigs.googleClientVerKey}`}
+        ></Script>
+      )}
       <Flex
         alignItems={'center'}
         justifyContent={'center'}
@@ -117,6 +124,7 @@ const Login = () => {
 
         {isOpen && <CommunityModal onClose={onClose} />}
       </Flex>
+    </>
   );
 };
 

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?: {