Echarts 官宣更新：体积减少98%，UI特效更加好看

2024-03-11码农

模拟面试、简历指导、入职指导、项目指导、答疑解惑 可私信找我~已帮助100+名同学完成改造！

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~

增强的 ESM 支持

为了增强开发者在 Node.js 环境和测试场景中使用 ECharts 的便利性，我们对 ESM（ECMAScript 模块）的支持做了重要优化。

在旧版本中，ECharts 仅通过 npm 的 lib 目录提供了 *.esm 文件格式，这虽然在打包工具（如 webpack）中运行良好，但在纯 Node.js 环境或某些基于 Node.js 的测试框架（比如 vitest 和 jest）中却不尽人意。

为此，我们引入了以下几项改进：

在 package.json 文件中，我们新增了 "type": "module" ，标识模块类型为 ESM。

我们还在 package.json 中定义了 "exports" 字段，以精确指定模块导出路径。

在部分子目录下，我们添加了仅含 "type": "commonjs" 的 package.json 文件，以支持 CommonJS 模块类型。

这些调整使得像 echarts/core.js 这类文件能够在各种环境下（包括纯 Node.js、vitest、jest、create-react-app 等）以 ESM 的形式被正确解析。

我们还确保了这项新功能的兼容性，无论是在不同的运行时环境（Node.js、vitest、jest、create-react-app、服务器端渲染等）还是不同的打包工具（webpack、rollup、vite、esbuild 等）中都能顺畅工。

我们对这项新功能寄予厚望，并相信它将大大提升开发者在使用过程中的体验。

服务端渲染＋客户端轻量运行时

Apache ECharts 是一个功能丰富的图表库，但这也导致了较大的包体积。为了应对这一问题，开发者之前已经可以通过 TreeShaking 来按需加载代码，有效减少了不必要的代码量。从 5.3 版本开始，Apache ECharts 进一步支持了无需外部依赖的服务端 SVG 字符串渲染功能，允许图表在服务器端渲染并支持初始动画。这样，通过服务端渲染的图表可以用作页面的首屏显示，显著降低首屏加载时间。

尽管服务端渲染是减轻包体积负担的有效手段，但在需要客户端交互时，还是必须加载 echarts.js 文件，这会增加额外的加载时间。对于对页面加载速度有严格要求的应用场景，这可能不是最佳选择。

在 5.5.0 版本中，ECharts 引入了一个新的客户端轻量运行时，使得在不加载完整 ECharts 的情况下，也能支持基本的图表交互。通过这种方式，我们可以先在服务器端渲染图表，然后在客户端仅通过加载不到 4KB 的轻量运行时（gzip 压缩后约为 1KB）来实现图表的初始动画和一些常用的交互功能。这种改进极大地加快了页面的加载速度，尤其改善了移动端的用户体验。

例如，一个包含标题的饼图，如果在客户端只打包饼图和标题组件，gzip 压缩后的体积为 135KB；而采用服务端渲染加客户端轻量运行时的方案，SVG 渲染结果和客户端运行时的总体积 gzip 后仅为约 2KB，仅占前者体积的 1.5%。此外，这种方案还支持初始动画、鼠标悬浮高亮和点击事件等常见交互，满足大多数交互需求。

要采用这种方案，服务器端的代码保持不变，只需确保 ECharts 的版本号为 5.5.0 或更高。