由于使用 ES 模块，您可以创建自己的定制 Highcharts 包。 使用自定义文件的一个好处是可以优化浏览器加载速度， 因为文件体积更小，请求的文件也更少。
按照以下步骤开始操作。
安装 Highcharts
访问highcharts/highcharts
仓库，点击“代码”并选择“下载 ZIP”。下载完成后，将压缩包解压到想要的位置。
以下步骤需要 Node.js，您可以从
Node.js 官网 下载并安装。Highcharts 支持长期支持（LTS）版本。
安装好 Node.js 后，打开你的命令行、终端或控制台，然后进入解压后的文件夹highcharts-master。在这里，你需要运行npm install来安装构建自定义 Highcharts 文件所需的依赖项。
创建一个自定义主文件
在你的编辑器中，进入解压后的文件夹highcharts-master/ts/masters/，并创建一个新文件，例如命名为custom.src.ts。在这个例子中，我们需要一个基本的折线图。为了实现这一点，我们需要一个列出所有必要 ES 模块的设置，如下所示：
/** * @license Highcharts JS v@product.version@ (@product.date@) * @module highcharts/highcharts * * (c) 2009-2024 Highcharts AS * * License: www.highcharts.com/license */'use strict';importHighchartsfrom'../Core/Globals.js';importSVGRendererfrom'../Core/Renderer/SVG/SVGRenderer.js';importChartfrom'../Core/Chart/Chart.js';importLineSeriesfrom'../Series/Line/LineSeries.js';constexports:Record<string,any>=Highcharts;exports.Renderer=SVGRenderer;exports.SVGRenderer=SVGRenderer;exports.Chart=Chart;exports.chart=Chart.chart;exports.LineSeries=LineSeries;exportdefaultHighcharts;根据你的需求修改设置，然后继续下一步。请注意，导入的 ES 模块的顺序有时必须与每个文件的依赖关系相匹配。因此，额外的可选内容应放在最后。有关顺序信息，请参阅其他示例。
查看现有的主文件，获取类似的示例。
创建自定义包文件
运行npx gulp scripts --force来将所有包文件从主文件构建出来。也可以选择额外运行npx gulp scripts-compile，以获得压缩版本。
在我们的示例中，新的文件ts/masters/custom.src.ts变成了新的包文件code/custom.src.js。压缩版可以在code/custom.js找到。你可以从code/文件夹中取出这些包文件，并在你的项目中使用它们。
对于兼容ESM的文件，你需要复制code/es-modules/文件夹。可以根据需要重命名这个文件夹。这个文件夹可能很大，但ESM只会从中挑选必要的文件用于你的项目。像parcel或webpack这样的打包工具可以帮助你在项目的最后阶段进一步优化加载时间。
如果你想在新包文件code/custom.src.js之外添加声明，请运行npx gulp jsdoc-dts --custom.
使用你的自定义包文件
根据我们的安装指南 installation ，你可以将自定义包文件作为ES6模块引用……
<html><body><divid="container"></div><scripttype="module">importHighchartsfrom'./esm/custom.js';Highcharts.chart('container',{series:[{type:'line',data:[1,32,42]}]});</script></body></html>或者用传统方式，带有一个 script 标签：
<html><head><scriptsrc="custom.src.js"></script></head><body><divid="container"></div><script>Highcharts.chart('container',{series:[{type:'line',data:[1,32,42]}]});</script></body></html>
