final opt

Author: TheCoderAdi

index.html

@@ -10,11 +10,21 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
+    <!-- Preload required fonts -->
+    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=Poppins:wght@200;400;600&family=Roboto+Slab&family=Sedan:ital@0;1&display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=Poppins:wght@200;400;600&family=Roboto+Slab&family=Sedan:ital@0;1&display=swap" media="print" onload="this.media='all'">
+
+    <noscript>
+      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=Poppins:wght@200;400;600&family=Roboto+Slab&family=Sedan:ital@0;1&display=swap">
+    </noscript>
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="/manifest.json" />
+    <!-- <link rel="manifest" href="/manifest.json" /> -->
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

package.json

@@ -40,6 +40,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "ajv": "^7.2.4",
     "vite": "^6.2.1",
-    "vite-plugin-compression2": "^1.3.3"
+    "vite-plugin-compression2": "^1.3.3",
+    "webpack-bundle-analyzer": "^4.10.2"
   }
 }

src/App.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=Poppins:wght@200;400;600&family=Roboto+Slab&family=Sedan:ital@0;1&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=Poppins:wght@200;400;600&family=Roboto+Slab&family=Sedan:ital@0;1&display=swap&display=swap');
 
 * {
   margin: 0;
@@ -54,7 +54,7 @@ h1 {
 
 h2 {
   font-family: "Bitter", serif;
-  font-size: 2.4rem;
+  font-size: 2.1rem;
 }
 
 p {
@@ -260,7 +260,7 @@ button {
 
 .heading {
   font-family: 'Bitter';
-  font-size: '36px';
+  font-size: 26px;
   font-weight: 900;
   color: var(--primary-font-color)
 }

src/App.jsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useState, lazy,Suspense } from 'react';
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 
+import Navbar from './Navbar'
+import Bookmarks from './pages/Bookmarks.jsx';
+import Loader from './components/Loader';
+
 const Home = lazy(() => import('./pages/Home.jsx'));
-const Navbar = lazy(() => import('./Navbar.jsx'));
-const Bookmarks = lazy(() => import('./pages/Bookmarks.jsx'));
-const Loader = lazy(() => import('./components/Loader.jsx'));
 
 export const App = () => {
   const [theme, setTheme] = useState('light');
@@ -20,12 +21,14 @@ export const App = () => {
 
   return (
     <Router>
+      <Navbar />
       <Suspense fallback={<Loader />}>
         {/* Navbar */}
-        <Navbar />
 
         {/* Theme toggle button */}
-        <button className="theme-switch" onClick={handleClick}>
+        <button className="theme-switch" onClick={handleClick} aria-label="Toggle Theme"
+          aria-pressed={theme === 'dark'} aria-labelledby="theme-switch-label"
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             height="40px"

src/Pagination.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, memo } from 'react';
 import { useGlobalContext } from './Context';
 
 const Pagination = () => {
@@ -59,4 +59,4 @@ const Pagination = () => {
   );
 };
 
-export default Pagination;
+export default memo(Pagination);

src/index.jsx

@@ -1,17 +1,14 @@
-import React from 'react';
+import React, { lazy } from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App'
 import { AppProvider } from './Context';
 
-
+const App = lazy(()=>import('./App'));
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
     <AppProvider>
       <App/>
     </AppProvider>
-  </React.StrictMode>
 );
 

src/pages/Home.jsx

@@ -1,18 +1,20 @@
-import React from 'react';
-import Search from '../Search';
-import Stories from '../Stories';
-import Pagination from '../Pagination';
-import PopularNews from '../PopularNews';
+import React,{lazy, Suspense} from 'react';
 import { useGlobalContext } from '../Context';
 
 import '../App.css';
 import "../Navbar.css";
+import Loader from '../components/Loader';
+
+const Search = lazy(()=>import('../Search'));
+const Stories = lazy(()=>import('../Stories'));
+const Pagination = lazy(()=>import('../Pagination'));
+const PopularNews = lazy(()=>import('../PopularNews'));
 
 export const Home = () => {
   const { showPopularNews } = useGlobalContext();
 
   return (
-    <>
+    <Suspense fallback={<Loader />}>
       {/* Search bar */}
       <Search />
 
@@ -21,7 +23,7 @@ export const Home = () => {
 
       {/* News sections */}
       {showPopularNews ? <PopularNews /> : <Stories />}
-    </>
+    </Suspense>
   );
 }
 

vite.config.js

@@ -1,14 +1,21 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import { compression } from 'vite-plugin-compression2'
+import { compression } from 'vite-plugin-compression2';
 
 export default defineConfig(() => {
   return {
     build: {
       outDir: 'dist',
+      sourcemap: false,
     },
-    plugins: [react(),compression({
-      algorithm: 'gzip',
-    })],
+    optimizeDeps: {
+      include: ['react-router-dom'], 
+    },
+    plugins: [
+      react(),
+      compression({
+        algorithm: 'gzip',
+      }),
+    ],
   };
-});
+});