性能优化：大型图表库（ECharts）的异步加载与主题封装实践

1/* getEcharts.js */
2import { customTheme } from './theme/my-theme'; // 引入你的自定义主题
3let echartsPromise = null;
4let themeRegistered = false;
5/**
6 * 异步获取 ECharts 实例的统一出口
7 */
8export default function getEcharts() {
9  // 1. 利用单例 Promise 解决并发加载
10  // 无论被调用多少次，只有第一次会触发 import 行为
11  if (!echartsPromise) {
12    // 约定 chunkName，将 ECharts 相关的所有代码抽离到独立文件
13    echartsPromise = import(
14      /* webpackChunkName: "lib-echarts" */ './init-echarts'
15    ).then((m) => m.default || m);
16  }
17  return echartsPromise.then((echarts) => {
18    // 2. 管控全局副作用：主题注册
19    // 只有在实例加载成功且从未注册过主题时，执行一次注册
20    if (!themeRegistered) {
21      echarts.registerTheme('my-theme', customTheme);
22      themeRegistered = true;
23      console.log('ECharts Theme Registered');
24    }
25    
26    return echarts;
27  });
28}

1// BaseChart.vue
2import getEcharts from '@/libs/getEcharts';
3export default {
4  methods: {
5    async initChart() {
6      // 这里的 getEcharts 会处理下载、缓存、主题注册
7      const echarts = await getEcharts();
8      
9      const chartInstance = echarts.init(this.$el, 'my-theme');
10      chartInstance.setOption({
11        title: { text: '异步加载示例' },
12        // ... 其他配置
13      });
14    }
15  },
16  mounted() {
17    this.initChart();
18  }
19}