如何定制构建仅含所需图表类型的ChartJS以减小文件体积？

方法一：修改ChartJS源码后重新构建（适合自定义独立文件） #

ChartJS基于Rollup构建，直接调整源码入口即可剔除冗余模块：

1. 打开ChartJS源码根目录下的src/index.js文件
2. 找到雷达图（Radar）相关的导入与注册代码，直接删除：

   // 删掉这行导入
   // import { RadarController } from './charts/radar';
   
   // 注册列表中也删掉对应的项
   Chart.register(
     BarController,
     BubbleController,
     // ...保留你需要的其他图表控制器
     // RadarController, // 移除这行
     ScatterController
   );
   

3. 若不需要雷达图依赖的径向线性刻度（RadialLinearScale），也可同步删除src/scales/radialLinear.js的导入与注册
4. 回到源码根目录，执行构建命令：

   npm run build
   

   完成后dist文件夹会生成仅包含你所需图表的精简版文件

方法二：用Tree Shaking按需引入（适合项目集成场景） #

如果你的项目用Webpack、Vite等支持Tree Shaking的工具，无需修改ChartJS源码，直接按需导入：

1. 不要导入完整的ChartJS，而是精准引入核心和所需模块：

   import { Chart } from 'chart.js/auto/core';
   // 只引入你需要的图表、刻度、组件
   import { LineController, LineElement } from 'chart.js';
   import { CategoryScale, LinearScale } from 'chart.js';
   import { PointElement, Tooltip, Legend } from 'chart.js';
   
   // 仅注册需要的组件
   Chart.register(
     LineController,
     LineElement,
     CategoryScale,
     LinearScale,
     PointElement,
     Tooltip,
     Legend
   );
   

   打包工具会自动剔除未使用的雷达图相关代码

额外优化提示 #

• 若不需要Tooltip、Legend等交互组件，也可移除对应的注册，进一步压缩体积
• 可用gzip-size工具验证优化效果：

  npx gzip-size dist/chart.js
  

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