title: NextJS reduce First Load of shared JS
body: <p>In a bigger project, I have a fairly high amount of used third-party libraries, including firebase, redux, etc and some more specific ones (but only used on several pages) like konvaJS, jimp, ....
  I just migrated recently to nextJS to speed up the website &amp; maybe allow SSR. However, after migrating, the Lighthouse Speedtest dropped compared to the Pure React Version. The main problem seems to be the shared JS first Load bundles.</p>
  <p>After some optimizing, including lazy loading bigger Components with <code>dynamic()</code> &amp; modules with <code>await import()</code>, I managed to compress the shared first load JS bundles by half, but they are still around 400KB which is way too heavy. I guess heavy modules like firebase are included there as well, because it is needed basically everywhere in the App.</p>
  <p>I also tried to analyze the dependencies with <code>@next/bundle-analyzer</code>. But the Visualization is not really easy to interpret. Is it true that it also lists modules that are lazy loaded? And in addition, I have some dependency packed multiple times in different bundles. Last but not least, the bundles visualized by the analyzer do not match the names of the <code>build</code> output.</p>
  <p><a href="https://i.stack.imgur.com/oWhHO.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oWhHO.jpg" alt="enter image description here" /></a></p>
  <p>Any help to reduce or understand the process better is well appreciated. I am using current React &amp; Next.js versions.</p>
  <p>Edit: This is the composition of the shared JS bundles after build:
  <a href="https://i.stack.imgur.com/IopOR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IopOR.png" alt="enter image description here" /></a></p>
  <p>Edit2: I am still confused about the output of bundle-analyzer. The module <code>jspdf</code> for instance, is only used in one page / component and lazy loaded. Is it correct that it is still visible in the analyzer? It does not have any impact on the shared JS bundle size.</p>
  <p>Edit3: I managed to lazy load my firebase modules (which are crucial for my App), so I saved over 200KB shared JS size. Still hoping to cut down the remaining. Btw, the bundle analyzers output did not really change.
  <a href="https://i.stack.imgur.com/0cjMC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0cjMC.png" alt="enter image description here" /></a></p>