Angular Chart.js移除Moment.js依赖以减小打包体积

我来帮你解决Chart.js搭配Angular 7时Moment.js导致打包体积激增的问题——毕竟Moment.js本身体积不小，还容易被完整打包进项目里。结合你用的Chart.js 2.7.3版本，这里有几个实用方案：

方案1：用轻量日期适配器替换Moment.js #

Chart.js 2.x默认依赖Moment.js处理时间轴刻度、日期格式化，但它支持自定义日期适配器，我们可以用体积小很多的库（比如date-fns或luxon）来替代：

1. 安装适配的轻量库和对应适配器
   针对Chart.js 2.x，你需要安装适配旧版本的适配器包（以date-fns为例）：

   npm install date-fns@2.x chartjs-adapter-date-fns@1.x --save
   

   （chartjs-adapter-date-fns v1.x专门适配Chart.js 2.x，v2.x则对应Chart.js 3+）

2. 在Angular项目中注册适配器
   在你导入Chart.js的文件里，先导入适配器，它会自动替换掉默认的Moment.js适配器：

   // 导入Chart.js核心
   import * as Chart from 'chart.js';
   // 导入date-fns适配器，自动覆盖默认的Moment依赖
   import 'chartjs-adapter-date-fns';
   
   // 如果你需要按需注册Chart.js组件（进一步减小体积）
   // 比如只注册柱状图和核心组件：
   import 'chart.js/dist/Chart.core';
   import 'chart.js/dist/Chart.bar';
   

3. 移除多余依赖
   如果你的项目里没有其他地方用到Moment.js，可以直接卸载它：

   npm uninstall moment
   

   （Chart.js的package.json里虽声明依赖Moment，但我们用适配器替换后，打包时会忽略它）

方案2：禁用日期功能（如果不需要时间轴） #

如果你的图表完全不需要处理时间相关的刻度（比如没有时间轴的柱状图、饼图），可以直接禁用Chart.js的日期适配器，这样就不会触发Moment.js的加载：

import * as Chart from 'chart.js';

// 覆盖默认的日期适配器为null，阻止加载Moment.js
Chart.defaults.global.adapters.date = null;

// 按需导入你实际用到的Chart.js模块，比如只导入饼图：
import 'chart.js/dist/Chart.core';
import 'chart.js/dist/Chart.pie';

这种方式能最大化减小体积，只打包你真正用到的Chart.js部分。

方案3：用webpack别名“剔除”Moment.js（极端场景） #

如果上述方法都不适用，你可以通过webpack的别名配置，把Moment.js指向一个空模块，强制打包时忽略它：

1. 如果你用Angular CLI，需要先安装@angular-builders/custom-webpack来自定义webpack配置：

   npm install @angular-builders/custom-webpack --save-dev
   

2. 创建一个空模块文件（比如src/empty-moment.js）：

   export default {};
   

3. 在自定义webpack配置文件（比如webpack.config.js）里添加别名：

   const path = require('path');
   
   module.exports = {
     resolve: {
       alias: {
         moment: path.resolve(__dirname, 'src/empty-moment.js')
       }
     }
   };
   

4. 修改angular.json，使用自定义webpack配置：
   在architect.build.builder里替换为@angular-builders/custom-webpack:browser，并添加customWebpackConfig配置：

   "build": {
     "builder": "@angular-builders/custom-webpack:browser",
     "options": {
       "customWebpackConfig": {
         "path": "./webpack.config.js"
       },
       // ...其他原有配置
     }
   }
   

   注意：这个方法仅适用于完全不用Chart.js日期功能的场景，否则会导致时间轴相关代码报错。

额外建议：升级Chart.js到3.x（长远方案） #

如果你的Angular项目可以兼容更高版本的Chart.js，建议升级到3.x及以上——Chart.js从3.x开始已经把Moment.js设为可选依赖，默认不会包含它，体积会小很多。不过升级时需要注意API的变化，比如注册组件的方式从Chart.register()替代了旧的导入方式。

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