Vue3中如何对Chart.js进行Tree Shaking优化构建体积

Chart.js的chart.js/auto会自动导入并注册所有图表类型、渲染器和插件，导致打包体积冗余。要实现按需导入，按以下步骤操作：

1. 按需导入核心模块与所需组件 #

仅导入你实际使用的核心模块、图表类型、渲染器和插件，示例以折线图+提示框+图例为例：

// 导入Chart核心
import { Chart } from 'chart.js';
// 导入折线图依赖的控制器、元素、刻度
import { LineController, LineElement, PointElement, LinearScale, CategoryScale } from 'chart.js';
// 导入所需插件
import { Tooltip, Legend } from 'chart.js';

2. 注册所需组件到Chart核心 #

将导入的组件注册到Chart实例，确保图表能正常渲染：

Chart.register(
  LineController,
  LineElement,
  PointElement,
  LinearScale,
  CategoryScale,
  Tooltip,
  Legend
);

3. 在Vue组件中使用优化后的Chart.js #

在Vue组件的生命周期钩子中创建图表实例，同时注意组件卸载时销毁图表避免内存泄漏：

<template>
  <canvas ref="chartCanvas"></canvas>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { Chart } from 'chart.js';
import { LineController, LineElement, PointElement, LinearScale, CategoryScale, Tooltip, Legend } from 'chart.js';

// 注册所需组件
Chart.register(LineController, LineElement, PointElement, LinearScale, CategoryScale, Tooltip, Legend);

const chartCanvas = ref(null);
let myChart = null;

onMounted(() => {
  if (chartCanvas.value) {
    myChart = new Chart(chartCanvas.value, {
      type: 'line',
      data: {
        labels: ['一月', '二月', '三月'],
        datasets: [{
          label: '销售额',
          data: [12, 19, 3],
          borderColor: 'rgb(75, 192, 192)',
          tension: 0.1
        }]
      },
      options: {
        plugins: {
          tooltip: {},
          legend: {}
        }
      }
    });
  }
});

onUnmounted(() => {
  myChart?.destroy();
});
</script>

关键注意事项 #

• 确保使用Chart.js v3.x及以上版本，v3才支持完善的Tree Shaking机制。
• 不同图表类型依赖不同的控制器和元素：比如柱状图需要BarController、BarElement，饼图需要PieController、ArcElement，按需导入对应模块即可。
• 彻底放弃chart.js/auto导入方式，它会强制加载所有模块，导致Tree Shaking失效。

内容的提问来源于stack exchange，提问作者David Stanton