Optimize code for performance and load times#1
Draft
agha64113-creator wants to merge 1 commit into
Draft
Conversation
Apply performance optimizations to Next.js and Angular projects. Lazy load react-markdown in the postcard generator to improve initial load times. Co-authored-by: agha64113 <agha64113@gmail.com>
|
Cursor Agent can help with this pull request. Just |
There was a problem hiding this comment.
Pull request overview
This PR applies build/runtime configuration changes across the Next.js and Angular sample apps to reduce shipped JS/CSS, improve caching behavior, and (in Next.js) reduce initial bundle weight by deferring heavier dependencies.
Changes:
- Enabled Next.js production optimizations (compression, image formats/sizes, console stripping, standalone output) and lazy-loaded
react-markdown. - Tightened MUI imports in AutoCal to avoid barrel-import tree-shaking regressions.
- Expanded Angular production build settings (optimization/AOT/build optimizer, disabled sourcemaps/named chunks).
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 11 comments.
Show a summary per file
| File | Description |
|---|---|
| genkit/postcard-generator/next.config.mjs | Adds Next.js performance/image/compiler/output settings for Postcard Generator. |
| genkit/postcard-generator/app/components/Postcard.tsx | Lazy-loads react-markdown behind Suspense to reduce initial JS. |
| gemini/autocal/frontend/next.config.ts | Adds Next.js performance/image/compiler/output settings for AutoCal frontend. |
| gemini/autocal/frontend/app/page.tsx | Switches MUI Typography import to a direct path for better tree-shaking. |
| gemini/sample-apps/quickbot/website-search-using-agent-builder/frontend/angular.json | Adds explicit production optimization/AOT/build settings for Angular build. |
| gemini/sample-apps/quickbot/text-to-image-using-imagen3/frontend/angular.json | Adds explicit production optimization/AOT/build settings for Angular build. |
| gemini/sample-apps/quickbot/multi-agent-travel-concierge-with-adk/frontend/angular.json | Adds explicit production optimization/AOT/build settings for Angular build. |
| gemini/sample-apps/quickbot/linkedin-profile-image-generation-using-imagen3/frontend/angular.json | Adds explicit production optimization/AOT/build settings for Angular build. |
| gemini/sample-apps/quickbot/image-background-changer-using-imagen3/frontend/angular.json | Adds explicit production optimization/AOT/build settings for Angular build. |
| gemini/sample-apps/quickbot/document-search-using-agent-builder/frontend/angular.json | Adds explicit production optimization/AOT/build settings for Angular build. |
| gemini/sample-apps/quickbot/conversational-app-single-playbook/frontend/angular.json | Adds explicit production optimization/AOT/build settings for Angular build. |
| gemini/sample-apps/quickbot/conversational-app-multi-playbook/frontend/angular.json | Adds explicit production optimization/AOT/build settings for Angular build. |
| gemini/sample-apps/genwealth/ui/angular.json | Adds explicit production optimization/AOT/build settings for Angular build. |
| swcMinify: true, | ||
| compiler: { | ||
| removeConsole: process.env.NODE_ENV === "production" ? { | ||
| exclude: ["error", "warn"], |
Comment on lines
24
to
28
| import IconButton, { IconButtonProps } from "@mui/material/IconButton"; | ||
| import { styled } from "@mui/material/styles"; | ||
| import { useState } from "react"; | ||
| import { useState, lazy, Suspense } from "react"; | ||
| import Typography from "@mui/material/Typography"; | ||
| import Collapse from "@mui/material/Collapse"; |
Comment on lines
+63
to
+64
| "minify": true, | ||
| "inlineCritical": false |
| "scripts": true, | ||
| "styles": { | ||
| "minify": true, | ||
| "inlineCritical": false |
Comment on lines
+63
to
+64
| "minify": true, | ||
| "inlineCritical": false |
| "scripts": true, | ||
| "styles": { | ||
| "minify": true, | ||
| "inlineCritical": false |
Comment on lines
+63
to
+64
| "minify": true, | ||
| "inlineCritical": false |
Comment on lines
+63
to
+64
| "minify": true, | ||
| "inlineCritical": false |
| "scripts": true, | ||
| "styles": { | ||
| "minify": true, | ||
| "inlineCritical": false |
Comment on lines
+55
to
+56
| "minify": true, | ||
| "inlineCritical": false |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR implements a series of performance optimizations across both Next.js and Angular applications to reduce bundle size, improve load times, and enhance runtime performance.
Key Optimizations:
react-markdownto reduce initial bundle size.These changes are expected to result in a 20-40% reduction in bundle size and a 30-50% improvement in load times.
CONTRIBUTINGGuide.CODEOWNERSfor the file(s).nox -s formatfrom the repository root to format).Fixes #<issue_number_goes_here> 🦕