Angular 15独立组件中ngx-echarts Treeshaking失效求助

1. 确认依赖版本兼容性 #

确保ngx-echarts和echarts版本适配Angular 15：

• ngx-echarts需为^15.x.x版本，echarts需为^5.x.x版本
• 执行命令更新依赖：

  npm install ngx-echarts@latest echarts@latest
  

2. 修正按需导入方式（核心步骤） #

禁止全局导入整个echarts包，改为按需导入所需模块：

// 仅导入echarts核心模块
import * as echarts from 'echarts/core';
// 导入需要的图表类型（这里仅导入BarChart）
import { BarChart } from 'echarts/charts';
// 导入所需的交互组件（按需选择）
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
// 导入渲染器（二选一：CanvasRenderer/SVGRenderer）
import { CanvasRenderer } from 'echarts/renderers';

// 注册已导入的模块
echarts.use([
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  CanvasRenderer
]);

3. 调整Angular构建配置 #

确保生产构建开启优化与TreeShaking：
在angular.json的build配置中检查以下项：

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "optimization": true,
      "buildOptimizer": true,
      "vendorChunk": false,
      // 可选：生成stats文件用于包分析
      "statsJson": true
    },
    "configurations": {
      "production": {
        "optimization": true,
        "buildOptimizer": true
      }
    }
  }
}

执行生产构建命令：

ng build --configuration production

4. 排查全局引入隐患 #

• 删除index.html中通过<script>标签引入的echarts CDN链接
• 检查所有代码文件，确保没有import 'echarts'这类全局导入语句

5. 独立组件中正确配置ngx-echarts #

在独立组件中仅导入NgxEchartsModule，无需全局注册forRoot()（若之前有全局注册需移除）：

import { NgxEchartsModule } from 'ngx-echarts';

@Component({
  selector: 'app-bar-chart',
  standalone: true,
  imports: [NgxEchartsModule],
  template: `<div echarts [options]="chartOptions" class="chart-container"></div>`
})
export class BarChartComponent {
  chartOptions = {
    title: { text: '示例柱状图' },
    tooltip: {},
    xAxis: { data: ['项目A', '项目B', '项目C'] },
    yAxis: {},
    series: [{ type: 'bar', data: [120, 200, 150] }]
  };
}

6. 验证TreeShaking效果 #

使用webpack-bundle-analyzer分析构建包：

# 安装依赖
npm install webpack-bundle-analyzer --save-dev
# 分析生产构建的stats文件
npx webpack-bundle-analyzer dist/你的项目名称/stats.json

查看分析结果，确认仅包含BarChart及相关依赖模块，而非完整的echarts包。

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