feat: integrate @next/bundle-analyzer for improved bundle analysis; refactor dynamic imports in dashboard and pdf-viewer components

apps/infoalloggi/next.config.ts

@@ -7,13 +7,17 @@ import { fileURLToPath } from "node:url";
 import type { NextConfig } from "next";
 import { env } from "~/env";
 
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+	enabled: process.env.ANALYZE === "true",
+});
+
 async function createNextConfig(): Promise<NextConfig> {
 	const { createJiti } = await import("jiti");
 	const jiti = createJiti(fileURLToPath(import.meta.url));
 
 	await jiti.import("./src/env.ts");
 
-	return {
+	return withBundleAnalyzer({
 		compiler: {
 			removeConsole: false,
 		},
@@ -70,7 +74,7 @@ async function createNextConfig(): Promise<NextConfig> {
 		typescript: {
 			ignoreBuildErrors: true,
 		},
-	};
+	});
 }
 
 export default (async () => await createNextConfig())();

apps/infoalloggi/package-lock.json

@@ -13,6 +13,7 @@
 				"@dnd-kit/utilities": "^3.2.2",
 				"@fattureincloud/fattureincloud-ts-sdk": "^2.1.1",
 				"@hookform/resolvers": "^5.2.1",
+				"@next/bundle-analyzer": "^16.0.2",
 				"@radix-ui/react-dialog": "^1.1.15",
 				"@radix-ui/react-popover": "^1.1.14",
 				"@radix-ui/react-scroll-area": "^1.2.10",
@@ -1218,6 +1219,15 @@
 			"integrity": "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==",
 			"license": "MIT"
 		},
+		"node_modules/@discoveryjs/json-ext": {
+			"version": "0.5.7",
+			"resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
+			"integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
 		"node_modules/@dnd-kit/accessibility": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
@@ -2763,6 +2773,15 @@
 				"@tybys/wasm-util": "^0.10.0"
 			}
 		},
+		"node_modules/@next/bundle-analyzer": {
+			"version": "16.0.2",
+			"resolved": "https://registry.npmjs.org/@next/bundle-analyzer/-/bundle-analyzer-16.0.2.tgz",
+			"integrity": "sha512-gmkuyLJrTURyV4TJcig50izj4GowAxqtBCT11eRTBxT0H5QEE388KKNTd94w9LFqtP3ws1+2AgFwlcuKUAk7Tg==",
+			"license": "MIT",
+			"dependencies": {
+				"webpack-bundle-analyzer": "4.10.1"
+			}
+		},
 		"node_modules/@next/env": {
 			"version": "15.4.7",
 			"resolved": "https://registry.npmjs.org/@next/env/-/env-15.4.7.tgz",
@@ -3215,6 +3234,12 @@
 				"node": ">=14"
 			}
 		},
+		"node_modules/@polka/url": {
+			"version": "1.0.0-next.29",
+			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
+			"integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
+			"license": "MIT"
+		},
 		"node_modules/@radix-ui/colors": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/@radix-ui/colors/-/colors-3.0.0.tgz",
@@ -9469,7 +9494,6 @@
 			"version": "8.15.0",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
 			"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
-			"dev": true,
 			"license": "MIT",
 			"peer": true,
 			"bin": {
@@ -9492,6 +9516,18 @@
 				"acorn": "^8.14.0"
 			}
 		},
+		"node_modules/acorn-walk": {
+			"version": "8.3.4",
+			"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
+			"integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
+			"license": "MIT",
+			"dependencies": {
+				"acorn": "^8.11.0"
+			},
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
 		"node_modules/ajv-formats": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
@@ -10909,6 +10945,12 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/duplexer": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+			"integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
+			"license": "MIT"
+		},
 		"node_modules/eastasianwidth": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -11917,6 +11959,21 @@
 			"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
 			"license": "ISC"
 		},
+		"node_modules/gzip-size": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
+			"integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+			"license": "MIT",
+			"dependencies": {
+				"duplexer": "^0.1.2"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/has-bigints": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
@@ -12039,6 +12096,12 @@
 			"dev": true,
 			"license": "ISC"
 		},
+		"node_modules/html-escaper": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+			"integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
+			"license": "MIT"
+		},
 		"node_modules/html-to-text": {
 			"version": "9.0.5",
 			"resolved": "https://registry.npmjs.org/html-to-text/-/html-to-text-9.0.5.tgz",
@@ -12495,6 +12558,15 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/is-plain-object": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+			"integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/is-regex": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
@@ -13813,6 +13885,15 @@
 			"integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
 			"license": "MIT"
 		},
+		"node_modules/mrmime": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
+			"integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=10"
+			}
+		},
 		"node_modules/ms": {
 			"version": "2.1.3",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -14516,6 +14597,15 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/opener": {
+			"version": "1.5.2",
+			"resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+			"integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+			"license": "(WTFPL OR MIT)",
+			"bin": {
+				"opener": "bin/opener-bin.js"
+			}
+		},
 		"node_modules/optionator": {
 			"version": "0.9.4",
 			"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -17048,6 +17138,20 @@
 			"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
 			"license": "MIT"
 		},
+		"node_modules/sirv": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
+			"integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@polka/url": "^1.0.0-next.24",
+				"mrmime": "^2.0.0",
+				"totalist": "^3.0.0"
+			},
+			"engines": {
+				"node": ">= 10"
+			}
+		},
 		"node_modules/sisteransi": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -17994,6 +18098,15 @@
 			"integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==",
 			"license": "MIT"
 		},
+		"node_modules/totalist": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+			"integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/ts-easing": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz",
@@ -18480,6 +18593,69 @@
 				}
 			}
 		},
+		"node_modules/webpack-bundle-analyzer": {
+			"version": "4.10.1",
+			"resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.10.1.tgz",
+			"integrity": "sha512-s3P7pgexgT/HTUSYgxJyn28A+99mmLq4HsJepMPzu0R8ImJc52QNqaFYW1Z2z2uIb1/J3eYgaAWVpaC+v/1aAQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@discoveryjs/json-ext": "0.5.7",
+				"acorn": "^8.0.4",
+				"acorn-walk": "^8.0.0",
+				"commander": "^7.2.0",
+				"debounce": "^1.2.1",
+				"escape-string-regexp": "^4.0.0",
+				"gzip-size": "^6.0.0",
+				"html-escaper": "^2.0.2",
+				"is-plain-object": "^5.0.0",
+				"opener": "^1.5.2",
+				"picocolors": "^1.0.0",
+				"sirv": "^2.0.3",
+				"ws": "^7.3.1"
+			},
+			"bin": {
+				"webpack-bundle-analyzer": "lib/bin/analyzer.js"
+			},
+			"engines": {
+				"node": ">= 10.13.0"
+			}
+		},
+		"node_modules/webpack-bundle-analyzer/node_modules/commander": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+			"integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/webpack-bundle-analyzer/node_modules/debounce": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+			"integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==",
+			"license": "MIT"
+		},
+		"node_modules/webpack-bundle-analyzer/node_modules/ws": {
+			"version": "7.5.10",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+			"integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=8.3.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": "^5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
+				},
+				"utf-8-validate": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/webpack-sources": {
 			"version": "3.3.3",
 			"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.3.3.tgz",

apps/infoalloggi/package.json

@@ -15,7 +15,8 @@
 		"start": "next start",
 		"stripe-dev": "stripe listen --forward-to https://localhost:3000/api/stripe-webhook",
 		"test": "npm run lint && npm run types",
-		"types": "tsc --noEmit"
+		"types": "tsc --noEmit",
+		"analyze": "cross-env ANALYZE=true next build"
 	},
 	"version": "0.1.0",
 	"dependencies": {
@@ -24,6 +25,7 @@
 		"@dnd-kit/utilities": "^3.2.2",
 		"@fattureincloud/fattureincloud-ts-sdk": "^2.1.1",
 		"@hookform/resolvers": "^5.2.1",
+		"@next/bundle-analyzer": "^16.0.2",
 		"@radix-ui/react-dialog": "^1.1.15",
 		"@radix-ui/react-popover": "^1.1.14",
 		"@radix-ui/react-scroll-area": "^1.2.10",

apps/infoalloggi/src/components/area-riservata/dashboard.tsx

@@ -1,8 +1,7 @@
+import dynamic from "next/dynamic";
 import { AccordionComp } from "~/components/accordionComp";
 import { LoadingPage } from "~/components/loading";
 import { TabRicerca } from "~/components/tables/ricerca-table";
-import TimeserieBarChart from "~/components/timeserieBarChart";
-import TimeserieBarChartStacked from "~/components/timeserieBarChartStacked";
 import {
 	Card,
 	CardContent,
@@ -14,6 +13,23 @@ import { useTranslation } from "~/providers/I18nProvider";
 import type { UsersId } from "~/schemas/public/Users";
 import { api } from "~/utils/api";
 
+const TimeserieBarChart = dynamic(
+	() => import("~/components/timeserieBarChart").then((mod) => mod.default),
+	{
+		ssr: false,
+		loading: () => <div className="h-[468px] animate-pulse bg-gray-100" />,
+	},
+);
+
+const TimeserieBarChartStacked = dynamic(
+	() =>
+		import("~/components/timeserieBarChartStacked").then((mod) => mod.default),
+	{
+		ssr: false,
+		loading: () => <div className="h-[468px] animate-pulse bg-gray-100" />,
+	},
+);
+
 export const AdminDashboard = () => {
 	const { data: stats, isLoading } = api.stats.adminDashStats.useQuery();
 

apps/infoalloggi/src/components/pdf-viewer.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Document, Page } from "react-pdf";
+
 import "react-pdf/dist/Page/AnnotationLayer.css";
 import "react-pdf/dist/Page/TextLayer.css";
 
@@ -7,6 +7,17 @@ import type { PDFDocumentProxy } from "pdfjs-dist";
 import { LoadingPage } from "./loading";
 
 import "pdfjs-dist/build/pdf.worker.min.mjs";
+import dynamic from "next/dynamic";
+
+const Document = dynamic(
+	() => import("react-pdf").then((mod) => ({ default: mod.Document })),
+	{ ssr: false },
+);
+
+const Page = dynamic(
+	() => import("react-pdf").then((mod) => ({ default: mod.Page })),
+	{ ssr: false },
+);
 
 //pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
 

apps/infoalloggi/src/pages/annunci.tsx

@@ -9,10 +9,10 @@ import {
 	Table,
 } from "lucide-react";
 import type { GetServerSideProps } from "next";
+import dynamic from "next/dynamic";
 import Head from "next/head";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { AccordionComp } from "~/components/accordionComp";
-import { MapSection } from "~/components/annunci_map";
 import { CTA_TipologiaModal } from "~/components/annunci_tutorial";
 import { LazyCardAnnuncio } from "~/components/annuncio_card";
 import { CodiceBox } from "~/components/codiceRicerca";
@@ -45,6 +45,17 @@ import {
 import { generateSSGHelper } from "~/server/utils/ssgHelper";
 import { api } from "~/utils/api";
 
+const MapSection = dynamic(
+	() =>
+		import("~/components/annunci_map").then((mod) => ({
+			default: mod.MapSection,
+		})),
+	{
+		ssr: false,
+		loading: () => <LoadingPage />,
+	},
+);
+
 type AnnunciPageProps = {
 	options: AnnunciOptions;
 };