Optimizing Next.js Bundle Size with Dynamic Imports

During one of our recent feature releases, we noticed something concerning: our initial page load bundle size had increased. As the application grows, this kind of creeping increase can negatively impact performance — especially for users on slower networks. So, we decided it was time to investigate and optimize.

Step 1: Checking the Build Output

yarn build

This allowed me to see the bundle breakdown for each route in our Next.js application. While the output gave some high-level numbers, I wanted more visibility into which packages were increasing the size.

Step 2: Analyzing With Bundle Analyzer

To dig deeper, I used the Next.js Bundle Analyzer plugin. This tool visualizes everything included in the client bundle. Once the build completed, the analyzer made one issue very obvious:

The first load js shared by all is 1.16MB before lazy loading as you can see below

👉 The emoji-mart package we introduced for our new feature was taking up ~100 KB gzipped just on the initial load.

Step 4: Dynamic Import to the Rescue

To fix this, I removed the default static import from the main component and created a custom React hook to dynamically import the library when the user interacts with the feature.

This approach gives us code-splitting, meaning the emoji picker is bundled separately and only downloaded when required.
Created a custom hook to load emoji-mart library on user click.

export const useEmojiPicker = () => {
  const [emojiDataLoaded, setEmojiDataLoaded] = useState(false)
  const [emojiData, setEmojiData] = useState<any>(null)

  const loadEmojiData = async () => {
    if (!emojiDataLoaded) {
      try {
        const data = await import('@emoji-mart/data')
        setEmojiData(data.default)
        setEmojiDataLoaded(true)
      } catch (error) {
        console.error('Failed to load emoji data:', error)
      }
    }
  }

  return { emojiData, emojiDataLoaded, loadEmojiData }
}

// Parent Component
const { emojiDataLoaded, emojiData, loadEmojiData } = useEmojiPicker()

// OnClickHandler
const onClickHandler = async () {
    // Load emoji data on first picker open
    if (!emojiDataLoaded) {
      await loadEmojiData()
    }
}

By doing this during build time, the webpack will split the emoji-mart package into separate chunks and it is loaded when needed instead of first page load.

Step 5: Reduced bundle size

After applying the change, I ran yarn build again.

Result: 🎉

Our first page load bundle size dropped from 1.16 MB → 1.05 MB.

It may not sound huge, but in performance work:

Small optimizations compound — and early wins help guide future improvements.

Conclusion:
This was just the first step in optimizing our growing codebase. Moving forward, we’ll continue

Auditing unused dependencies
Applying lazy loading where possible
Monitoring bundle size for every new feature
Automating alerts when thresholds are exceeded

Command Palette