If, in 2025, anyone is facing the same issue with react-pdf causing excessive bundle size or initial page load lag, you can try the following approach. Instead of using React.lazy() (which is for JSX components), I'm using standard dynamic imports for the required functions and components. This ensures they are imported and processed only when the PDF button is clicked, not on every page render. This solves the performance and bundle size issues.

NB: The following code snippet is from a project, currently, I'm working on. Here, I'm trying to generate a PDF for a ticket.

const handleGeneratePdf = async () => {
    if (!ticket || !company) return;

    try {
      const { pdf } = await import("@react-pdf/renderer");
      const { default: CertiPdf } = await import("../CertPdf");

      // Generate PDF blob
      const blob = await pdf(<CertPdf company={company} ticket={ticket} />).toBlob();

      // Create URL for viewing/printing
      const url = URL.createObjectURL(blob);
      setPdfUrl(url);
    } catch (error) {
      console.error("Error generating PDF:", error);
    } 
  };