Hey there! I totally get the frustration when you try optimizing bundle size and your efforts don't seem to move the needle—let's fix that Recharts issue together. Here are actionable methods to get those vendor bundle sizes down:

1. Ensure Tree Shaking is Working Properly #

First, let's rule out why your individual ES6 imports didn't help. Tree Shaking relies on your build tool (like Webpack) eliminating unused code, but it needs the right setup:

• Make sure your Webpack mode is set to production (this enables Tree Shaking by default).
• Explicitly mark Recharts modules as side-effect free in your project's package.json to help Webpack safely strip unused code:

  "sideEffects": [
    "*.css", // Keep this if you have other CSS imports
    "!recharts/**/*.js"
  ]
  

2. Dynamic Imports with React.lazy & Suspense #

If you want to load Recharts components only when they're needed (e.g., when a tab is clicked or the component enters the viewport), use React's built-in lazy loading. This splits the chart code into a separate chunk, keeping your initial vendor bundle small.

Step 1: Extract your chart into a separate component #

Create LineChartComponent.jsx:

// Import only the components you need from ES6 paths
import ResponsiveContainer from 'recharts/es6/component/ResponsiveContainer';
import LineChart from 'recharts/es6/chart/LineChart';
import Line from 'recharts/es6/cartesian/Line';
import XAxis from 'recharts/es6/cartesian/XAxis';
import YAxis from 'recharts/es6/cartesian/YAxis';
import CartesianGrid from 'recharts/es6/cartesian/CartesianGrid';

export default function LineChartComponent({ data }) {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Line type="monotone" dataKey="value" stroke="#8884d8" />
      </LineChart>
    </ResponsiveContainer>
  );
}

Step 2: Lazy-load the component in your main app #

import { lazy, Suspense } from 'react';

// Dynamically import the chart component
const LineChartComponent = lazy(() => import('./LineChartComponent'));

function App() {
  return (
    <div className="App">
      {/* Your other app content */}
      <Suspense fallback={<div>Loading chart...</div>}>
        {/* The chart will only load when this component renders */}
        <LineChartComponent data={yourDataset} />
      </Suspense>
    </div>
  );
}

3. Use babel-plugin-import for Auto On-Demand Imports #

If you prefer keeping your original import syntax (import { ... } from 'recharts') but still want to load only what you need, babel-plugin-import automates converting those imports to individual ES6 module imports.

Setup: #

1. Install the plugin:

   npm install babel-plugin-import --save-dev
   

2. Add it to your Babel config (.babelrc or babel.config.js):

   {
     "plugins": [
       ["import", {
         "libraryName": "recharts",
         "libraryDirectory": "es6",
         "style": false // Recharts uses inline styles, so no CSS to import
       }]
     ]
   }
   

   If you're using Create React App, you'll need react-app-rewired to modify the Babel config without ejecting.

With this setup, your original import line will automatically get transformed into individual ES6 imports under the hood, and Tree Shaking will handle the rest.

4. Verify Bundle Changes with an Analyzer #

To confirm your changes are working, use webpack-bundle-analyzer to visualize your bundle:

1. Install it:

   npm install webpack-bundle-analyzer --save-dev
   

2. Add it to your Webpack plugins:

   const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
   
   module.exports = {
     // ... other Webpack config
     plugins: [new BundleAnalyzerPlugin()]
   };
   

Run your build, and the analyzer will open a browser tab showing exactly how much space Recharts is taking up—you should see only the components you're using, not the entire library.

A quick note: Dynamic imports won't remove Recharts from your bundle entirely, but they'll delay loading it until it's needed, which reduces your initial load time and vendor bundle size.

内容的提问来源于stack exchange，提问作者Hein Htet Zaw