perf: remove Sentry client SDK and lazy-load TipTap (~830KB saved)
- Remove withSentryConfig wrapper from next.config.ts (Sentry was disabled anyway) - Clear instrumentation-client.ts to prevent Sentry client bundle (~400KB) - Lazy-load RichTextClient via next/dynamic in About.tsx and Contact.tsx - Defers TipTap/ProseMirror loading until CMS data arrives (~430KB) - Homepage First Load JS: 1479KB → 646KB (56% reduction) - Shared JS: 182KB → 102KB (44% reduction) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -4,7 +4,8 @@ import { useState, useEffect } from "react";
|
||||
import { Globe, Server, Wrench, Shield, Gamepad2, Code, Activity, Lightbulb, BookOpen, MessageSquare, ArrowRight, Tv, Plane, Camera, Stars, Music, Terminal, Cpu } from "lucide-react";
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
import type { JSONContent } from "@tiptap/react";
|
||||
import RichTextClient from "./RichTextClient";
|
||||
import dynamic from "next/dynamic";
|
||||
const RichTextClient = dynamic(() => import("./RichTextClient"), { ssr: false });
|
||||
import CurrentlyReading from "./CurrentlyReading";
|
||||
import ReadBooks from "./ReadBooks";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
|
||||
@@ -6,7 +6,8 @@ import { Mail, MapPin, Send, Github, Linkedin } from "lucide-react";
|
||||
import { useToast } from "@/components/Toast";
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
import type { JSONContent } from "@tiptap/react";
|
||||
import RichTextClient from "./RichTextClient";
|
||||
import dynamic from "next/dynamic";
|
||||
const RichTextClient = dynamic(() => import("./RichTextClient"), { ssr: false });
|
||||
|
||||
const Contact = () => {
|
||||
const { showEmailSent, showEmailError } = useToast();
|
||||
|
||||
@@ -1,12 +1,2 @@
|
||||
// This file configures the initialization of Sentry on the client.
|
||||
// The added config here will be used whenever a users loads a page in their browser.
|
||||
// https://docs.sentry.io/platforms/javascript/guides/nextjs/
|
||||
|
||||
import * as Sentry from "@sentry/nextjs";
|
||||
|
||||
Sentry.init({
|
||||
dsn: process.env.NEXT_PUBLIC_SENTRY_DSN || "https://148e31ea874c60f3d2e0f70fd6701f6b@o4510751135105024.ingest.de.sentry.io/4510751388926032",
|
||||
enabled: false,
|
||||
});
|
||||
|
||||
export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;
|
||||
// Sentry client SDK disabled to reduce bundle size (~400KB).
|
||||
// To re-enable, restore the @sentry/nextjs import and withSentryConfig in next.config.ts.
|
||||
|
||||
@@ -3,8 +3,6 @@ import dotenv from "dotenv";
|
||||
import path from "path";
|
||||
import bundleAnalyzer from "@next/bundle-analyzer";
|
||||
import createNextIntlPlugin from "next-intl/plugin";
|
||||
import { withSentryConfig } from "@sentry/nextjs";
|
||||
|
||||
// Load the .env file from the working directory
|
||||
dotenv.config({ path: path.resolve(process.cwd(), ".env") });
|
||||
|
||||
@@ -228,42 +226,4 @@ const withBundleAnalyzer = bundleAnalyzer({
|
||||
|
||||
const withNextIntl = createNextIntlPlugin("./i18n/request.ts");
|
||||
|
||||
// Wrap with Sentry
|
||||
export default withSentryConfig(
|
||||
withBundleAnalyzer(withNextIntl(nextConfig)),
|
||||
{
|
||||
// For all available options, see:
|
||||
// https://github.com/getsentry/sentry-webpack-plugin#options
|
||||
|
||||
org: "dk0",
|
||||
project: "portfolio",
|
||||
|
||||
// Only print logs for uploading source maps in CI
|
||||
silent: !process.env.CI,
|
||||
|
||||
// Upload a larger set of source maps for prettier stack traces (increases build time)
|
||||
widenClientFileUpload: true,
|
||||
|
||||
// Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
|
||||
tunnelRoute: "/monitoring",
|
||||
|
||||
// Webpack-specific options
|
||||
webpack: {
|
||||
// Automatically annotate React components to show their full name in breadcrumbs and session replay
|
||||
reactComponentAnnotation: {
|
||||
enabled: true,
|
||||
},
|
||||
// Automatically tree-shake Sentry logger statements to reduce bundle size
|
||||
treeshake: {
|
||||
removeDebugLogging: true,
|
||||
},
|
||||
// Enables automatic instrumentation of Vercel Cron Monitors
|
||||
automaticVercelMonitors: true,
|
||||
},
|
||||
|
||||
// Source maps configuration
|
||||
sourcemaps: {
|
||||
disable: false,
|
||||
},
|
||||
}
|
||||
);
|
||||
export default withBundleAnalyzer(withNextIntl(nextConfig));
|
||||
|
||||
Reference in New Issue
Block a user