CODEWITHSUNDEEP
javascriptreactjswebpacknext.js
Vanson Wing Leung
Vanson Wing Leung

Reputation: 325

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

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:

Next.JS bundle stats analyzer

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

Upvotes: 3

Views: 7170

Answers (1)

Andy Gaskell
Andy Gaskell

Reputation: 31761

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.

Upvotes: 6

Related Questions