Consider using webpack optimize-plugin to reduce KB size ~9%

[websocket98765]

Feature request

Consider adding https://github.com/developit/optimize-plugin to NextJS' webpack config.

Why?

Google released a website where you can enter your URL and it will estimate KB savings of using 'modern JS'. For my NextJS app, savings were ~9%.

The recommended improvements can be automatically applied using a webpack plugin: https://github.com/developit/optimize-plugin

I know I can add this manually to my webpack config, but it might be worth considering as a default part of NextJS for best developer experience.

Blog post with more info

https://web.dev/publish-modern-javascript/

[awareness481]

Next.js already uses the module/nomodule syntax that plugin is providing. I'm not sure whether that plugin does anything better than Next.js' custom implementation.

[zjhiphop]

Based on the page speed test, there're some legacy scripts syntax still used in modern browser, so it's necessary to use optimize-plugin to build the separated scripts.

 Polyfills and transforms enable legacy browsers to use new JavaScript features. However, many aren't necessary for modern browsers. For your bundled JavaScript, adopt a modern script deployment strategy using module/nomodule feature detection to reduce the amount of code shipped to modern browsers, while retaining support for legacy browsers. 

https://pagespeed.web.dev/analysis/https-www-campingjungfrau-swiss/49ex1d0cnb?form_factor=desktop#:~:text=Avoid%20serving%20legacy-,JavaScript,-to%20modern%20browsers