2

Title.

My First Load JS shared by all is rather heavy, due to the chunks/pages/_app/ section, and I want to reduce it. Commenting the layout out will only reduce it by ~1kb, and node_modules is a minor issue within my Webpack Bundle Analyzer, and instead pages is large. In addition, while my index.jsx looks to be heavy as well, I am not doing much on that page, and I believe it is due to something with the +15 modules, but am unsure what that means.

How do I go about reducing the size of chunks/pages/_app/, and my pages? I am using dynamic imports in all of them, and most are SSR.

img1

img2

daxidngyn
  • 49
  • 8
  • Correct me if I'm wrong, but the chunks from the bundle analyzer output don't seem to match what you get in the build output. – juliomalves Jun 19 '22 at 12:22
  • Not too sure what it is then, but both were generated in tandem, and I assumed that "pages" in the output being so large was representative of the chunks/pages/ having such a heavy load as well.My index.jsx file should not be the problem either, as I commented out the entire page and the load was barely reduced, and not using SSR on that page to add on. – daxidngyn Jun 19 '22 at 14:34
  • You have `crypto-browserify` inside your _app bundle which is quite big. This usually happens when you require a JWT signing/verification library inside a React component or Next page. Make sure that you use only these functions server side and that you are requiring these libraries directly inside `getServerSideProps` functions: `export async function getServerSideProps (ctx) { const jwt = require('jwt');` – Harry Theo Nov 16 '22 at 23:42

0 Answers0