Rechart组件可以加载React.lazy吗？

Question

我正在尝试实现代码拆分，但某些组件无法正常工作。来自 documentation，组件必须来自 export default，这些是。我也试过默认将它们导出到我自己的文件中，但是没有用。

这是一个示例组件。几个组件可以拆分，如果我尝试这样做，其余组件不会呈现。

import React, { lazy, Suspense } from 'react'
import {
  Bar,
  CartesianGrid,
  Legend,
  Tooltip,
  XAxis,
  YAxis,
} from 'recharts'
const BarChart = lazy(() => import('recharts/lib/chart/BarChart'))
const ResponsiveContainer = lazy(() => import('recharts/lib/component/ResponsiveContainer'))

const barAxisTick = ({ x, y, payload }) => {
  return (
    <g transform={`translate(${x},${y})`}>
      <text dy={16} textAnchor="middle" fill="#666">{payload.value}</text>
    </g>
  )
}

const StackedBarChart = ({ data, height }) => (
  <Suspense fallback={<div style={height}></div>}>
    <ResponsiveContainer height={height.height} id="timeline">
      <BarChart data={data} margin={{ top: 16, right: 32, left: 8, bottom: 5 }}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" tick={barAxisTick} />
        <YAxis />
        <Tooltip />
        <Legend />
        <Bar dataKey="Collected" stackId="a" fill="#1976d2" />
        <Bar dataKey="Due" stackId="a" fill="#d32f2f" />
      </BarChart>
    </ResponsiveContainer>
  </Suspense>
)

export default StackedBarChart

Answer 1

const BarChart = lazy(() => import('recharts').then(module => ({ default: module.BarChart })));
const ResponsiveContainer = lazy(() => import('recharts').then(module => ({ default: module.ResponsiveContainer })));
const Bar = lazy(() => import('recharts').then(module => ({ default: module.Bar })));
const XAxis = lazy(() => import('recharts').then(module => ({ default: module.XAxis })));
const YAxis = lazy(() => import('recharts').then(module => ({ default: module.YAxis })));
const CartesianGrid = lazy(() => import('recharts').then(module => ({ default: module.CartesianGrid })));
const Tooltip = lazy(() => import('recharts').then(module => ({ default: module.Tooltip })));
const ReferenceLine = lazy(() => import('recharts').then(module => ({ default: module.ReferenceLine })));

recharts 没有默认导出，所以你必须这样导入

Rechart组件可以加载React.lazy吗？

Can Rechart components be loaded with React.lazy?

javascript

reactjs

recharts