DEV Community

박준희
박준희

Posted on • Edited on • Originally published at aicoreutility.com

Solving Slow Chatbot Loading with Lazy Loading and Tree Shaking

#lazyloading #react

We've all been there, right? Frustrated by a chatbot that takes ages to load initially. I was too. The user experience was clearly suffering from bottlenecks caused by complex UI components all trying to load at once. In this post, I want to honestly share how I tackled this problem.

Trials and Pitfalls

My first thought was simple: reduce the bundle size. I fiddled with Webpack configurations, removed unused libraries, and tried other common optimization tricks. But there was no noticeable performance improvement.

I specifically noticed that the DrawingCanvas component took an unusually long time to load. This component was using some pretty heavy libraries, and I started to wonder if they were truly necessary at the initial loading stage.

// Original DrawingCanvas component loading method (assumed)
import DrawingCanvas from './DrawingCanvas';

function Chatbot() {
  // ...
  return (
    <div>
      {/* ... */}
      <DrawingCanvas />
      {/* ... */}
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Around this time, I began to suspect that tree-shaking might not be working correctly for libraries like framer-motion. I only realized later that simply using import { motion } from 'framer-motion'; could include animation-related code that wasn't actually being used in the bundle.

The Cause

Ultimately, the biggest issue was that the DrawingCanvas component was being loaded unnecessarily at the initial loading stage. It wasn't a component that needed to be visible until the user performed a specific interaction.

Furthermore, the way I was using the framer-motion library wasn't optimized for tree-shaking, leading to more code being included in the bundle than what was actually used.

The Solution

To solve this, I implemented two main strategies. First, I used React.lazy and Suspense to dynamically import the DrawingCanvas component.

import React, { Suspense } from 'react';

const LazyDrawingCanvas = React.lazy(() => import('./DrawingCanvas'));

function Chatbot() {
  // ...
  return (
    <div>
      {/* ... */}
      <Suspense fallback={<div>Loading Canvas...</div>}>
        <LazyDrawingCanvas />
      </Suspense>
      {/* ... */}
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Second, I made sure to explicitly import only the necessary motion components from the framer-motion library to ensure proper tree-shaking. For example, if I only needed motion.div, I would import it like this:

// Example of applying tree-shaking for framer-motion
import { motion } from 'framer-motion/dist/framer-motion'; // Explicitly import only the needed motion components

function AnimatedComponent() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      {/* ... */}
    </motion.div>
  );
}
Enter fullscreen mode Exit fullscreen mode

By doing this, the bundle size decreased, and only the code that was actually needed was loaded, resulting in a noticeable improvement in initial loading speed.

The Results

  • Initial chatbot loading time was reduced by approximately 30%.
  • Initial JavaScript bundle size was reduced by approximately 15%.
  • From a user experience perspective, the chatbot felt much more responsive and ready to go.

Summary — How to Avoid the Same Pitfalls

  • [ ] Review whether a component is absolutely necessary at initial load. If not, use React.lazy and Suspense for dynamic loading.
  • [ ] When using libraries like framer-motion, be mindful of tree-shaking by explicitly importing only the motion components you need.
  • [ ] Regularly use bundle analysis tools to identify which modules are contributing significantly to your bundle size and devise optimization strategies.

💬 This is part of *Riel** — a full AI product I'm building solo, in public (failures and all). Read more build logs → · See the product →*

Top comments (0)