feat: optimize homepage load

mission-apprentissage · Jan 16, 2025 · db04159 · db04159
1 parent 37f5686
commit db04159
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 20 deletions.
diff --git a/ui/components/HowTo/HowTo.tsx b/ui/components/HowTo/HowTo.tsx
@@ -1,15 +1,14 @@
 import { Box, Container, Grid, GridItem, Image, Show, Text } from "@chakra-ui/react"
-import React from "react"
 
 const HowTo = () => {
   return (
     <>
       <Container variant="responsiveContainer">
         <Grid templateColumns={{ base: "1fr", md: "repeat(3, 1fr)" }} gap={{ base: "10", md: "24" }}>
           <GridItem position="relative" width={{ base: "200px", md: "auto" }} mx="auto">
-            <Image src="/images/howto1.svg" alt="" zIndex="2" position="inherit" />
+            <Image fetchPriority="low" src="/images/howto1.svg" alt="" zIndex="2" position="inherit" />
             <Show above="md">
-              <Image src="/images/howtoline1.svg" alt="" position="absolute" top="85px" left="-162px" />
+              <Image fetchPriority="low" src="/images/howtoline1.svg" alt="" position="absolute" top="85px" left="-162px" />
             </Show>
             <Box>
               <Text as="h3" fontSize="1.25rem" fontWeight="500" mb="3">
@@ -19,9 +18,9 @@ const HowTo = () => {
             </Box>
           </GridItem>
           <GridItem position="relative" width={{ base: "200px", md: "auto" }} mx="auto">
-            <Image src="/images/howto2.svg" alt="" zIndex="2" position="inherit" />
+            <Image fetchPriority="low" src="/images/howto2.svg" alt="" zIndex="2" position="inherit" />
             <Show above="md">
-              <Image src="/images/howtoline2a.svg" alt="" position="absolute" top="47px" left="-208px" />
+              <Image fetchPriority="low" src="/images/howtoline2a.svg" alt="" position="absolute" top="47px" left="-208px" />
             </Show>
             <Box>
               <Text as="h3" fontSize="1.25rem" fontWeight="500" mb="3">
@@ -31,10 +30,10 @@ const HowTo = () => {
             </Box>
           </GridItem>
           <GridItem position="relative" width={{ base: "200px", md: "auto" }} mx="auto" mb="12">
-            <Image src="/images/howto3.svg" alt="" zIndex="2" position="inherit" />
+            <Image fetchPriority="low" src="/images/howto3.svg" alt="" zIndex="2" position="inherit" />
             <Show above="md">
-              <Image src="/images/howtoline3a.svg" alt="" position="absolute" top="47px" left="-200px" />
-              <Image src="/images/howtoline3b.svg" alt="" position="absolute" top="47px" left="158px" />
+              <Image fetchPriority="low" src="/images/howtoline3a.svg" alt="" position="absolute" top="47px" left="-200px" />
+              <Image fetchPriority="low" src="/images/howtoline3b.svg" alt="" position="absolute" top="47px" left="158px" />
             </Show>
             <Box>
               <Text as="h3" fontSize="1.25rem" fontWeight="500" mb="3">

diff --git a/ui/next.config.mjs b/ui/next.config.mjs
@@ -89,7 +89,31 @@ const nextConfig = {
       },
     ],
   },
-  webpack: (config) => {
+  webpack: (config, { isServer }) => {
+    if (!isServer) {
+      // To optmize homepage loading, would be deleted when switching to App router
+      config.optimization.splitChunks.cacheGroups.priorityChunks = {
+        name: "high-priority",
+        test: (module) => {
+          if (
+            [
+              "./components/StartForm/StartForm.tsx",
+              "./components/SearchForm/SearchForm.tsx",
+              "./components/SearchForTrainingsAndJobs/components/SearchFormResponsive.tsx",
+              "./components/WidgetHeader/WidgetHeaderHomePage.tsx",
+              "./components/SearchForTrainingsAndJobs/components/SearchFormResponsiveHomePage.tsx",
+            ].includes(module?.resourceResolveData?.relativePath)
+          ) {
+            return true
+          }
+          return false
+        },
+        priority: 35,
+        chunks: "all",
+        minChunks: 1,
+        reuseExistingChunk: true,
+      }
+    }
     // Bson is using top-level await, which is not supported by default in Next.js in client side
     // Probably related to https://github.com/vercel/next.js/issues/54282
     config.resolve.alias.bson = path.join(path.dirname(fileURLToPath(import.meta.resolve("bson"))), "bson.cjs")

diff --git a/ui/public/images/briefcase.svg b/ui/public/images/briefcase.svg