Next.js - Bundle Size too Large (~3MB)

Question

I would like to ask if there is any method to slim my Next.JS bundle. Especially the Node Modules - which leads to the Browser loading so much MBs, therefore slowing down the initial browsing.

Here is the analysis:

I am welcome to give more information whenever you ask more.

Answer 1

It looks like you're using webpack, here are a couple things to try:

Code Splitting

Code splitting is one of the most compelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel. It can be used to achieve smaller bundles and control resource load prioritization which, if used correctly, can have a major impact on load time.

Tree Shaking

Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module syntax, i.e. import and export. The name and concept have been popularized by the ES2015 module bundler rollup.