Refactor: gzip

package.json

@@ -35,7 +35,6 @@
     "@prerenderer/rollup-plugin": "^0.3.12",
     "@tanstack/react-query": "^5.24.1",
     "@types/event-source-polyfill": "^1.0.5",
-    "@types/gtag.js": "^0.0.20",
     "@types/node": "^20.10.4",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
@@ -55,6 +54,7 @@
     "rollup-plugin-visualizer": "^5.10.0",
     "typescript": "^5.3.2",
     "vite": "^5.0.6",
+    "vite-plugin-compression2": "^1.1.1",
     "vite-plugin-remove-console": "^2.2.0",
     "vite-tsconfig-paths": "^4.2.1"
   }

src/components/common/CTA.tsx

@@ -6,14 +6,14 @@ import { useSetRecoilState } from 'recoil';
 import { css, cx } from 'styled-system/css';
 import { CTA_TEXTS } from '@/constants/texts';
 
-interface CTA {
+interface CTAprops {
   text: string;
   actionText?: string;
   btn?: boolean;
   fn?: () => void;
 }
 
-const CTA = ({ text, actionText = '', btn = true, fn }: CTA) => {
+const CTA = ({ text, actionText = '', btn = true, fn }: CTAprops) => {
   const setFooterState = useSetRecoilState(footerShowState);
   const handleActions = () => {
     actionText !== CTA_TEXTS.followDiscoveryAction &&

src/components/home/TodayCaffeineText.tsx

@@ -44,7 +44,7 @@ const TodayCaffeineText = () => {
         <CoffeeImage
           src="/png/coffee_mainimg.png"
           alt="coffee"
-          srcset="/png/coffee_mainimg.png 120w"
+          srcSet="/png/coffee_mainimg.png 120w"
           sizes="(min-width: 360px) 120px, (max-width: 500px) 120px"
         />
       </div>

src/pages/Page-Search.tsx

@@ -1,30 +1,41 @@
-import SearchBar from '@/components/search/SearchBar';
-import SearchListItem from '@/components/search/SearchListItem';
-import SearchHistory from '@/components/search/SearchHistory';
+import { lazy, Suspense } from 'react';
 import SEOMeta from '@/components/common/SEOMeta';
 import SEO_DATA from '@/constants/SEOData';
 import { SearchContext } from '@/context/contexts';
 import { useSearchInput } from '@/hooks/search/useSearchInput';
 
+const SearchListItem = lazy(
+  () => import('../components/search/SearchListItem')
+);
+const SearchHistory = lazy(() => import('../components/search/SearchHistory'));
+const SearchBar = lazy(() => import('../components/search/SearchBar'));
+
 const Search = () => {
   const { results, search, handleChange, reset, setSearch } = useSearchInput();
   return (
     <>
       <SEOMeta pageData={SEO_DATA.search} />
-      <SearchBar
-        search={search}
-        handleChange={handleChange}
-        reset={reset}
-      />
-      {search && (
-        <SearchListItem
-          users={results}
+      <Suspense>
+        <SearchBar
           search={search}
+          handleChange={handleChange}
+          reset={reset}
         />
+      </Suspense>
+
+      {search && (
+        <Suspense>
+          <SearchListItem
+            users={results}
+            search={search}
+          />
+        </Suspense>
       )}
       {!search && (
         <SearchContext.Provider value={{ setSearch }}>
-          <SearchHistory />
+          <Suspense>
+            <SearchHistory />
+          </Suspense>
         </SearchContext.Provider>
       )}
     </>

vite.config.ts

@@ -8,11 +8,16 @@ import imageminPngQuant from 'imagemin-pngquant';
 import viteImagemin from '@vheemstra/vite-plugin-imagemin';
 import imageminSvgo from 'imagemin-svgo';
 import prerender from '@prerenderer/rollup-plugin';
+import compression from 'vite-plugin-compression2';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     react(),
+    compression({
+      include: [/\.js/, /\.css/],
+      threshold: 1400
+    }),
     prerender({
       routes: [
         '/',