PERF(gatsby): optimize webpack and MDX loading #6449

[Sukuna0007Abhi]

# Performance Optimization for Layer5 Website

##Issue no. #6449

## Changes Made

1. Added Webpack Bundle Analysis & Optimization:

{
  resolve: "gatsby-plugin-webpack-bundle-analyser-v2",
  options: {
    analyzerMode: "static",
    defaultSizes: "gzip",
    openAnalyzer: false,
    generateStatsFile: true,
    analyzerOptions: {
      maxModules: 150,
      excludeAssets: [/\.map$/]
    },
    optimizeOptions: {
      splitChunks: {
        chunks: "all", 
        minSize: 30000,
        maxSize: 250000,
        minChunks: 1,
        maxAsyncRequests: 5,
        maxInitialRequests: 3,
        automaticNameDelimiter: "~",
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10
          },
          default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
          }
        }
      }
    }
  }
}

2. Added Performance-Focused Gatsby Flags:

flags: {
FAST_DEV: true,
PARALLEL_SOURCING: true,
DEV_SSR: false,
LAZY_IMAGES: true,
PRESERVE_WEBPACK_CACHE: true,
PRESERVE_FILE_DOWNLOAD_CACHE: true
}

3. Enhanced MDX & Image Configuration:

mdxOptions: {
remarkPlugins: [],
rehypePlugins: [],
commonmark: true,
footnotes: true,
gfm: true,
jsxImportSource: "@jsxImportSource",
jsx: true,
development: process.env.NODE_ENV === "development"
},
gatsbyRemarkPlugins: [
{
 resolve: "gatsby-remark-images",
 options: {
   maxWidth: 1200,
   showCaptions: true,
   quality: 90,
   loading: "lazy",
   disableBgImageOnAlpha: true,
   withWebp: true,
   withAvif: true,
 }
}
]

##Technical Benefits

*Reduced initial JavaScript bundle size through code splitting.
*Improved caching with vendor chunk separation.
*Optimized image loading with modern formats (WebP, AVIF).
*Better build performance with cache preservation.
*Deferred loading of non-critical assets.
*Reduced network payload with gzip compression.
*Enhanced module analysis capabilities.
*Improved development experience with fast refresh.

##Performance Improvements

Smaller initial page load size.
Faster Time to Interactive (TTI).
Improved First Contentful Paint (FCP).
Better Largest Contentful Paint (LCP) scores.
Reduced Cumulative Layout Shift (CLS).
More efficient resource loading.
Enhanced caching strategies.
Optimized asset delivery.

##Implementation Details

<<Configured webpack chunk sizes (30KB-250KB).
<<Set up vendor bundle splitting.
<<Implemented lazy loading for images.
<<Added modern image format support.
<<Enabled development mode awareness.
<<Configured cache persistence.
<<Optimized build process.
<<Enhanced MDX processing.

##Testing

//Bundle analysis report shows optimized chunk sizes
//Images load progressively and in modern formats
//Build process maintains cache for faster rebuilds
//Development mode properly detected
//Webpack analyzer generates detailed reports
//Cache persistence verified across builds

##Files Changed
[gatsby-config.js]

##Notes

//No core functionality changes.
//Configuration-only updates.
//Backwards compatible changes.
//Performance-focused improvements.
//Built-in error handling.
//Development experience preserved.

Signed-off-by: [Abhijit](Ryomen Sukuna) [appsonly310@gmail.com]

[github-actions]

View in catalog, Edit in playground or learn how to interpret Meshery Designs

[Sukuna0007Abhi]

I will definitely fix these 3 issues by today for sure @leecalcote

[AmankeldinovaMadina]

I am assuming we could have some shared Loader or Skeleton component, so it might be worth creating a small HOC to take care of the Suspense with Skeleton/Loader fallback for better UI and UX, also having ErrorBoundary would be great

[Sukuna0007Abhi]

Thanks for suggesting.

[vishalvivekm]

@Sukuna0007Abhi
Thank you for your contribution!
Let's discuss this during the website call today at 7 AM CT | 5:30 PM IST.

Add it as an agenda item to the meeting minutes, if you would :)

[Sukuna0007Abhi]

Sure sir, thanks for the guidance. @vishalvivekm

[sudhanshutech]

@Sukuna0007Abhi isn't we already have defined somewhere the global css, why creating a another file for defining theme

[sudhanshutech]

why a single blog needed a redirect. This seems a redundant change. We should avoid this and instead changed the path where this blog is been mentioned if its being used in less places.

[sudhanshutech]

why npx?

[sudhanshutech]

if you are upgrading this then mdx/react also need to be upgraded to v2...

[Sukuna0007Abhi]

ok sir got it