Bundle-Analysis

Reduce Unused JavaScript with Dynamic CMS Components

I found in the bundle analysis that I was loading the CMS editor components into the _app chunk unnecessarily. I have been able to remove a lot of the JavaScript used but not all. Still, this has made a big impact to the chunk size as well as the performance scores.

The key ingredient to these changes has been using the next/dynamic util. The hardest part of this work has been to work out what functionality was needed to render the page outside of “editing” mode and secondly how best to use import to only include the functionality I am using.

Reduce Unused JavaScript Nextjs Bundle Analysis

The Lighthouse report says that the page is only using 1/3 of the JavaScript within the main _app file. Before I start making assumptions about what components or features need to be lazy loaded from the main app I need to do some analysis on the bundle.

Let’s remind ourselves of the previous report after I removed Youtube.

Webpack had a bundle analyzer which I have used many times to inspect what has been compiled into one of the JavaScript files. After a quick search I found that there is a NextJs plugin which integrates it into next build. The plugin is @next/bundle-analyzer and I configured it within next.config.js.