webpack

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

/** @type {import('next').NextConfig} */

Next.js bundle analyzer for targeted performance work

nextjs performance tooling

by codesnips 4 tabs

javascript

import React, { lazy, Suspense, useState, useEffect } from 'react';

// 1. Component lazy loading
const HeavyComponent = lazy(() => import('./HeavyComponent'));
const AdminPanel = lazy(() => import('./AdminPanel'));
const Dashboard = lazy(() => import('./Dashboard'));

Performance optimization - lazy loading and code splitting

performance optimization lazy-loading

by Alex Chang 2 tabs