Next.js is currently the most widely adopted React framework, known for its strong capabilities but often criticized for its significant JavaScript payload to the client. In this article, we will be learning techniques for analyzing bundle size, very important for making websites work better and making user experience better.

Prerequisites

• JavaScript
• Next.js

What is Bundle Analyzer?

A bundle analyzer is a tool used in software development, particularly in web development using technologies like JavaScript and its frameworks (e.g., React, Angular, Vue). Its primary purpose is to analyze the composition and size of the bundles generated by bundlers like Webpack, Turbopack, Rollup, Parcel etc.

Bundle analyzer is a tool used to analyze the size and composition of code bundles generated by bundlers like Webpack or similar tools used in frontend development(e.g., React, Vue).

Why analysing bundle matters?

In web development, bundle size matter because it directly impacts user experience of the website. Here’s how

1. Load Time: Smaller bundles means less data for user’s browser to download and translate. So, the website loads quicker especially for the user who are using slower internet connection and mobile devices.
2. Network Efficiency: Each file requires a separate HTTP request. Bundlers combines files into a single large file and removes unnecessary code. So, they reduce the number and size of bundles needed to load by the browser improving networking efficiency.
3. Better Search Engine Optimization: Search engines considers loading time as a ranking factor. So, if the website loads because of large JavaScript bundles, it will impact the ranking of the website.
4. Reduced cost: For website that charge on the basis of bandwidth use, bundle size can directly impact the cost for hosting the site as large bundles consumes more bandwidth.
5. Identify large modules: By seeing which modules are taking up the most space, you can focus your optimization efforts on those areas.

Tools to analyze bundle in Next.js

• Next.js built-in bundle analyzer: Next.js provides built-in plugin for analyzing and visualizing bundle. It is powered by Webpack bundle analyzer and represents bundle size in a visually in a easy to understand way. This is probably the best option for Next.js as it requires no extra configuration.
• Webpack bundle analyzer: It is a standalone plugin that can be used with any Webpack project.
• Source-map-explorer: It is used to analyze and visualize JavaScript (or TypeScript) bundle sizes generated by bundlers like Webpack, Parcel, or Rollup. It works with source maps to show you a more accurate representation.

What is Next.js Bundle Analyzer?

Next.js Bundle Analyzer is a plugin specifically designed for Next.js applications by Vercel to analyze the size and composition of your app’s bundle. It is useful for optimizing the performance by identifying large or inefficient modules and dependencies that can be refactored or split to improve loading times.

Features of Next.js Bundle Analyzer

1. Visualizes bundle contents: Provides a clear, interactive visualization of the bundle contents.
2. Size Breakdown: Breaks down the sizes of various modules and dependencies.
3. Optimization: Helps identify which parts of the bundle are taking up the most space, making it easier to optimize the application.

Steps to Implement Bundle Analyzer

Step 1: Use the following command to initialise a new Next.js project in you desired directory

npx create-next-app@latest

Step 2: Start the dev server with following command

npm run start

Step 3: Install the following command.

npm i @next/bundle-analyze

Dependencies

"dependencies": {
    "next": "14.2.4",
    "react": "^18",
    "react-dom": "^18"
},
"devDependencies": {
    "@next/bundle-analyzer": "^14.2.4",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.4",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
}

Folder Structure

Final project structure

Example: Implementing the next.js Bundle Analyzer

//next.config.js 

const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: process.env.ANALYZE === 'true',
})
module.exports = withBundleAnalyzer({})

//app/page.tsx

export default function Home() {
    return (
        <main>Hello GFG</main>
  );
}

Now, Use the following command to generate the report of the bundle.

ANALYZE=true npm run build

Output

See the Javascript bundle size of the project from the terminal.

Understanding the output of the bundle analyzer

1. Files that are related are painted in same colour.
2. Rectangles represent modules or packages, with size indicating relative importance. Larger rectangles denote larger modules.
3. Hovering over a rectangle shows detailed stats for that module.

You can also use sidebar to interact with bundles that you specify.