当前位置：首页 > news >正文

入门｜利用 Highcharts 的 ES6/ESM 模块安装方案

news 2025/11/12 8:47:20

Highcharts 从 v6.1 起支持 ES6（即 ECMAScript 模块，简称 ESM）方式加载；从 v11.3 起其核心文件也以 ES 模块形式发布，这意味着你可以 按需导入 模块并通过 “tree shaking”（未使用的代码被打包工具剔除）来减小最终包体积。
对于需要优化性能、减小加载延迟或构建现代前端项目（如 React、Vue、Angular）而言，这是一条值得掌握的安装路径。

1 . 直接在浏览器以 ESM 方式引入

对于调试或开发环境，你可以直接使用浏览器支持的 <script type="module"> 方式，从 CDN 加载 Highcharts 的 ES 模块版本。例如：

<script type="module">import Chart from 'https://code.highcharts.com/es-modules/Core/Chart/Chart.js';import LineSeries from 'https://code.highcharts.com/es-modules/Series/Line/LineSeries.js';new Chart('container', {series: [{ data: [1,2,3] }]});
</script>

这种方式的优点是快速启动，无需构建工具即可尝试。但缺点也明显：因多个小模块分别加载，会造成 HTTP 请求数量增多，从而可能导致加载延迟上升。官方指出 不推荐用于生产环境。

2 . 在 Node.js 项目中基于 ESM 创建自定义打包

当你需要在真实项目中使用 Highcharts，推荐在 Node.js 环境里配合打包工具（如 Webpack）来创建一个自定义的高效 bundle。流程如下：

步骤

新建项目，安装 Highcharts（通过 npm）和 Webpack。

在你的 JavaScript（或 TypeScript）文件中，只导入你实际使用的模块，例如：

// mychart.js
import Chart from 'highcharts/es-modules/Core/Chart/Chart.js';
import ColumnSeries from 'highcharts/es-modules/Series/Column/ColumnSeries.js';const myChart = new Chart('container', {series: [{type: 'column',data: [1,2,3]}]
});

在 webpack.config.js 中配置入口与输出，例如：

module.exports = {entry: './mychart.js',mode: 'production',output: {filename: 'mybundle.js',// 默认输出到 dist 子目录},
};

执行打包命令：
```
node webpack -c webpack.config.js
```

在网页中通过 ESM 方式加载打包后的文件：

<div id="container"></div>
<script type="module" src="./dist/mybundle.js"></script>

这样，最终加载文件中只包含你实际导入并使用的模块，从而减小体积、提升性能。官方数据表明，相比全量 highcharts.js （约 100 KB gzipped），只使用一个系列模块可节省约 17%–22%。

3 . 可选功能通过 Composition 机制加载

如果你只用了核心图表功能，但后期想启用例如 “数据标签（DataLabel）” 等可选模块，你可以通过 “compose” 机制来导入并激活额外功能。例如：

import Chart from 'highcharts/es-modules/Core/Chart/Chart.js';
import PieSeries from 'highcharts/es-modules/Series/Pie/PieSeries.js';
import PieDataLabel from 'highcharts/es-modules/Series/Pie/PieDataLabel.js';PieDataLabel.compose(PieSeries);

这样，你就可以保持 “仅加载必要模块” 的原则，而不是引入冗余功能。

4 . 优化说明：为何 ESM 更优？

Tree shaking 支持：通过导入特定模块，打包工具能剔除未使用的代码，最终包体积更小。
异步／懒加载支持：在现代浏览器中，可以按需 import 或动态 import 模块，使图表库的加载更加灵活。官方示例：

const loadHighchartsAndCreateChart = async () => {const { default: Highcharts } = await import('https://code.highcharts.com/esm/highcharts.js');await import('https://code.highcharts.com/esm/modules/exporting.js');await import('https://code.highcharts.com/esm/modules/accessibility.js');Highcharts.chart('container', { /* …options… */ });
};

模块化更清晰：代码结构更符合现代 JavaScript/TypeScript 项目组织习惯。也方便与诸如 React/Vue/Angular 框架集成。
未来兼容性更强：随着 Highcharts 在 v12 中的新 UMD/ESM 支持改进，建议优先考虑 ESM 路径。

5 . 典型问题及调试建议

如果你在 TypeScript 或特殊打包环境下遇到 “找不到模块声明” 的错误，比如报 TS7016: Could not find a declaration file for module 'highcharts/es-modules/Core/Chart/Chart.js'，社区曾在 GitHub issue 中指出这是 ESM 路径下声明文件未被正确识别的问题。
- 解决办法包括：确认你的 tsconfig.json 中将 moduleResolution 设为 “node”／“bundler”，并开启 allowSyntheticDefaultImports: true。
打包后的模块如果体积偏大或加载缓慢，建议检查是否引入了不必要的模块，或者将一些模块按需异步 import。
在浏览器直接用 ESM 方式加载多个 small 文件（如核心 + 各系列模块）时，HTTP 请求过多可能导致延迟增高，故不推荐用于生产。官方亦已说明。