按需引入与打包优化

按需引入的必要性

ECharts作为功能强大的数据可视化库，其完整包体积较大（压缩后约700KB）。在实际项目中，特别是移动端或对性能要求严格的场景，全量引入会导致资源浪费。通过按需引入机制，开发者可以仅加载使用到的图表类型和组件，显著减少打包体积。

// 全量引入（不推荐）
import * as echarts from 'echarts';

// 按需引入（推荐方式）
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([BarChart, GridComponent, CanvasRenderer]);

核心模块划分

ECharts 5+版本采用模块化架构，主要分为四大核心模块：

1. 核心模块(echarts/core)：包含基础坐标系、动画系统等
2. 图表模块(echarts/charts)：各种图表类型如折线图、饼图等
3. 组件模块(echarts/components)：工具栏、图例、提示框等
4. 渲染器模块(echarts/renderers)：Canvas或SVG渲染器

// 典型折线图所需模块
import {
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components';

自定义打包方案

通过Webpack的externals配置可以进一步优化：

// webpack.config.js
module.exports = {
  externals: {
    echarts: 'echarts'
  }
}

配合CDN引入核心文件：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

Tree Shaking实践

现代打包工具支持Tree Shaking，但需要满足ES模块规范：

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', { modules: false }]
  ]
}

配合package.json的sideEffects声明：

{
  "sideEffects": ["*.css", "*.scss"]
}

懒加载策略

对于大型仪表盘项目，可采用动态导入：

// 动态加载地图数据
const loadMap = async (mapName) => {
  const { default: mapJson } = await import(`echarts/map/json/${mapName}.json`);
  echarts.registerMap(mapName, mapJson);
};

组件级优化

对于Vue/React项目，推荐使用轻量级封装：

// React组件示例
import React, { useEffect, useRef } from 'react';
import initECharts from './initECharts'; // 自定义初始化逻辑

function EChart({ option }) {
  const chartRef = useRef(null);
  
  useEffect(() => {
    const chart = initECharts(chartRef.current);
    chart.setOption(option);
    return () => chart.dispose();
  }, [option]);

  return <div ref={chartRef} style={{ width: '100%', height: '400px' }} />;
}

体积分析工具

使用webpack-bundle-analyzer分析依赖：

npm install --save-dev webpack-bundle-analyzer

配置插件：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

主题按需加载

ECharts主题文件也可按需加载：

// 动态加载主题
import('echarts/theme/dark').then(theme => {
  echarts.registerTheme('myDark', theme);
  chart.setOption({ theme: 'myDark' });
});

扩展插件管理

对于水印、富文本等扩展插件：

// 仅在使用时引入
import 'echarts-liquidfill/src/liquidFill.js';
import 'echarts-wordcloud/src/wordCloud.js';

服务端渲染优化

SSR场景下需要特殊处理：

// 判断运行环境
const canUseDOM = typeof window !== 'undefined';
const echarts = canUseDOM ? require('echarts') : null;

版本锁定策略

避免意外引入多个版本：

{
  "resolutions": {
    "echarts": "5.4.3"
  }
}

性能监测方案

实现运行时体积监测：

function getModuleSize() {
  const modules = Object.keys(require.cache)
    .filter(key => key.includes('echarts'));
  return modules.reduce((total, module) => {
    return total + require.cache[module].size;
  }, 0);
}