按需引入与打包优化

按需引入的必要性

ECharts作为功能强大的数据可视化库，其完整包体积较大（压缩后约700KB）。现代前端项目对性能要求越来越高，特别是移动端场景下，首屏加载速度直接影响用户体验。按需引入能显著减少打包体积，例如仅使用折线图时，最终体积可缩减至原始大小的30%以下。

// 完整引入方式（不推荐）
import * as echarts from 'echarts';

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

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

核心模块化架构

ECharts 5+版本采用分层架构设计，主要分为四个核心层：

1. 核心模块（Core）：包含坐标系、事件系统等基础能力
2. 图表类型（Charts）：20+种图表实现，如LineChart, BarChart等
3. 组件（Components）：工具栏、提示框等辅助组件
4. 渲染器（Renderers）：Canvas/SVG渲染实现

// 典型折线图所需的最小模块组合
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components';
// 渲染器必须单独引入
import { CanvasRenderer } from 'echarts/renderers';
// 图表类型按需引入
import { LineChart } from 'echarts/charts';

自定义打包策略

通过webpack的splitChunks可以实现更精细的代码分割：

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        echarts: {
          test: /[\\/]node_modules[\\/]echarts[\\/]/,
          name: 'echarts',
          chunks: 'all',
          priority: 10
        }
      }
    }
  }
};

配合动态导入实现运行时按需加载：

// React示例
const EChartComponent = React.lazy(() => import('./EChartWrapper'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <EChartComponent />
    </Suspense>
  );
}

Tree Shaking实践

确保构建工具能正确消除未使用代码：

1. 使用ES模块格式（package.json中设置"module": "index.esm.js"）
2. 避免以下写法：

// 反例：会导致整个echarts被打包
import echarts from 'echarts/lib/echarts';

3. 推荐写法：

// 正例：配合babel-plugin-equire实现按需引入
const echarts = equire([
  'line',
  'tooltip'
]);

体积优化对比

不同引入方式的体积差异（gzip后）：

服务端渲染优化

SSR场景下需要特殊处理：

// 避免window未定义错误
if (typeof window !== 'undefined') {
  const echarts = require('echarts/lib/echarts');
  require('echarts/lib/chart/line');
}

// Next.js示例
dynamic(() => import('echarts'), {
  ssr: false,
  loading: () => <ChartSkeleton />
});

按需加载高级技巧

1. 懒加载策略：

function loadECharts() {
  return Promise.all([
    import('echarts/lib/echarts'),
    import('echarts/lib/chart/line'),
    import('echarts/lib/component/tooltip')
  ]).then(([echarts]) => echarts);
}

2. 预加载提示：

// 在路由变更时预加载
router.beforeEach((to, from, next) => {
  if (to.meta.requiresChart) {
    import('echarts/lib/chart/bar');
  }
  next();
});

常见问题解决方案

问题1：动态主题切换导致重复打包

// 错误做法：主题包会被重复打包
import 'echarts/theme/dark';

// 正确做法：通过CDN引入或external配置
externals: {
  'echarts/theme/dark': 'window.echarts.theme.dark'
}

问题2：多页面应用共享核心

// 配置公共依赖
new HtmlWebpackPlugin({
  chunks: ['echarts-runtime', 'page1']
})

// 单独打包核心
entry: {
  'echarts-runtime': ['echarts/lib/echarts']
}

性能监控与调优

使用webpack-bundle-analyzer分析构成：

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

配置插件：

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

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

典型优化方向：

• 检查是否有重复引入的模块
• 验证Tree Shaking是否生效
• 分析第三方依赖占比

现代构建工具适配

Vite配置示例：

// vite.config.js
export default {
  optimizeDeps: {
    include: [
      'echarts/core',
      'echarts/charts',
      'echarts/components'
    ]
  }
}

Rollup配置要点：

// rollup.config.js
import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  plugins: [
    nodeResolve({
      // 确保正确处理模块路径
      moduleDirectories: ['node_modules']
    })
  ]
};

动态注册机制

ECharts提供运行时扩展能力：

// 动态注册地图数据
fetch('geoData.json')
  .then(res => res.json())
  .then(rawData => {
    echarts.registerMap('city', rawData);
    chart.setOption({/*...*/});
  });

// 插件系统扩展
class MyPlugin {
  install(echarts) {
    echarts.registerChartType('custom', CustomChart);
  }
}
echarts.use(new MyPlugin());

模块联邦方案

微前端架构下的共享方案：

// host应用配置
new ModuleFederationPlugin({
  remotes: {
    echarts: 'echarts@http://cdn.com/echarts-remote-entry.js'
  }
});

// remote应用配置
new ModuleFederationPlugin({
  name: 'echarts',
  filename: 'remote-entry.js',
  exposes: {
    './core': 'echarts/lib/echarts'
  }
});