如何在Angular中缩减Highcharts生产构建体积？

我能否在Angular项目中缩减Highcharts导入的构建体积？当前包体积过大，尤其我们并未使用Highmaps或Highstocks，这些模块本无需导入。

当前配置信息 #

Package.json依赖 #

"angular-highcharts": "^17.0.0",
"highcharts": "^11.4.1",

非根模块导入代码 #

import { HIGHCHARTS_MODULES } from 'angular-highcharts';
import Highcharts from 'highcharts';
import Exporting from 'highcharts/modules/exporting';
import XRange from 'highcharts/modules/xrange';
import Offline from 'highcharts/modules/offline-exporting';
import Bellcurve from 'highcharts/modules/histogram-bellcurve';
import ExportData from 'highcharts/modules/export-data';

Exporting(Highcharts);
XRange(Highcharts);
Offline(Highcharts);
Bellcurve(Highcharts);
ExportData(Highcharts);
...
    providers: [
    { 
        provide: HIGHCHARTS_MODULES, useFactory: (): any =>
            [
                XRange,
                Offline,
                Bellcurve,
                ExportData
            ]
    }
],

包体积分析命令 #

ng build --configuration=production --output-hashing=all --stats-json && webpack-bundle-analyzer -p 8889 dist/<project>/stats.json

解决方案 #

1. 树摇的局限性说明
   默认树摇无法彻底剔除Highcharts中未使用的模块（如Highmaps/Highstocks），因为Highcharts核心包的内部引用逻辑，常规ES模块树摇无法识别并移除这些未使用的模块代码。

2. 优化现有导入方式
   你当前已在按需导入模块，可进一步调整：

   • 替换完整核心包导入，改用轻量核心版本：

     import Highcharts from 'highcharts/highcharts';
     

   • 全局排查项目，确认无其他间接引用Highmaps/Highstocks的代码。

3. 自定义Highcharts包（最彻底方案）
   若体积优化需求较高，建议使用自定义构建：

   • 仅勾选实际用到的核心功能、模块（基础图表、XRange、导出相关等），完全排除Highmaps、Highstocks及其他未用组件。
   • 将构建好的自定义包替换项目中原有的Highcharts依赖，配合angular-highcharts使用时调整导入路径指向自定义包。

4. 额外优化点

   • 确保Angular生产构建的buildOptimizer和optimization配置处于开启状态（默认生产环境已启用），最大化webpack压缩与树摇效果。
   • 评估是否可替换angular-highcharts为原生Highcharts导入，减少封装层带来的体积开销。

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