如何仅导入Chart.js折线图组件以优化包体积？

要实现最小化导入，你需要手动导入Chart核心模块以及折线图依赖的组件，再完成注册。具体操作如下：

• 导入核心与必要组件
  两种导入方式可选，后者更偏向极致体积优化：

  // 方式1：导入核心+全量可注册组件（仍比chart.js/auto体积小）
  import { Chart, registerables } from 'chart.js';
  
  // 方式2：精准导入折线图必需组件
  import Chart from 'chart.js/core';
  import { LineController, LineElement, PointElement } from 'chart.js/charts';
  import { CategoryScale, LinearScale } from 'chart.js/elements';
  // 以下为可选组件，按需导入
  import { Title, Tooltip, Legend } from 'chart.js/elements';
  

• 注册组件
  对应上面的导入方式，选择一种注册逻辑：

  // 对应方式1：一键注册所有可注册组件
  Chart.register(...registerables);
  
  // 对应方式2：仅注册折线图必需组件（可选组件按需添加）
  Chart.register(
    LineController,
    LineElement,
    PointElement,
    CategoryScale,
    LinearScale,
    // Title,
    // Tooltip,
    // Legend
  );
  

• 初始化折线图
  完成注册后即可正常创建折线图：

  const ctx = document.getElementById('myLineChart').getContext('2d');
  const lineChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['周一', '周二', '周三', '周四', '周五'],
      datasets: [{
        label: '日访问量',
        data: [150, 230, 180, 270, 210],
        borderColor: '#2196F3',
        backgroundColor: 'rgba(33, 150, 243, 0.1)',
        tension: 0.3
      }]
    }
  });
  

注意：如果省略Tooltip、Legend这类可选组件，对应交互功能会失效，根据自身需求决定是否注册。

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