Angular项目中能否仅安装DevExtreme图表包而非其完整安装包?
Angular项目按需使用DevExtreme Chart组件说明
完全支持仅使用DevExtreme图表组件,无需引入全量UI组件的冗余代码,具体实现逻辑和操作方式如下:
- 官方当前没有发布独立的单组件npm包,你只需要安装DevExtreme的核心基础依赖即可,构建环节会自动剔除所有未使用的组件代码,最终生产包中只会包含你用到的图表相关逻辑,和单独安装图表包的效果完全一致。
- 安装核心依赖命令:
npm install devextreme devextreme-angular - 项目中仅引入需要的图表模块即可,不要导入全局的DevExtreme全量模块,示例代码:
// app.module.ts 或对应业务模块文件 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; // 仅导入图表模块,不要导入devextreme-angular全量入口 import { DxChartModule } from 'devextreme-angular/ui/chart'; import { AppComponent } from './app.component'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, DxChartModule], bootstrap: [AppComponent] }) export class AppModule { } - 如果你需要用到其他图表附属能力(比如饼图、雷达图、导出工具、自定义提示框等),不需要额外导入其他全量模块,直接在图表组件的配置项中开启对应能力即可,构建工具会自动按需打包对应逻辑。
- 生产环境开启Angular默认的构建优化后,仅包含基础图表能力的DevExtreme相关代码体积通常在200KB以内,远低于全量包2MB+的体积。
内容的提问来源于stack exchange,提问作者Hesam Akbari
相关产品推荐
相关产品推荐

