【开发日记】Vue项目懒加载ECharts等JS脚本文件

关注

原创最新推荐文章于 2026-10-13 15:48:09 发布 803 阅读 AI 写同款· GEO 优化 ›

[问题探讨]H5移动端无限懒加载echarts图表引起的IOS闪退问题背景：Vue+Echarts+mintUI开发移动端app 问题：Echarts图表在IOS端懒加载多个时出现闪退问题分析：频繁操作App直到闪退出现，监控内存使用情况后发现，在操作过程中内存一直升高，到600M时软件闪退；考虑从两方面解决：一，减轻echarts图表渲染的压力(只渲染视口内的图表)；二，抑制频繁请求，减轻内存压力(抑制无效请求)；一，减轻echarts图... 阅读详情

1、前言

项目使用了ECharts和WordCloud（词云图），并使用npm的方式安装，导致打包后echarts占了打包文件的一半以上，影响网页加载速度。

所以就想着能不能让通过CDN的方式加载，而且是懒加载的方式，让ECharts的CDN文件在打开Vue组件时才开始加载。

2、实现效果

第一次打开界面加载网络数据

第二次打开界面加载网络数据

3、实现方法

① 创建一个动态加载JS脚本文件的函数，并返回一个Promise。

export function loadScript(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

② 创建一个用来加载ECharts和EChartsWordCloud的函数。

import { loadScript } from '@/util/LoadScript';

let echartsPromise = null;
let wordCloudPromise = null;

export function loadECharts() {
    if (!echartsPromise) {
        echartsPromise = loadScript('https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js');
    }
    return echartsPromise;
}

export function loadEChartsWordCloud() {
    if (!wordCloudPromise) {
        wordCloudPromise = loadScript('https://cdn.jsdelivr.net/npm/echarts-wordcloud/dist/echarts-wordcloud.min.js');
    }
    return wordCloudPromise;
}

③ 在组件中使用ECharts。

import { loadECharts } from '@/utils/echartsLoader';
export default {
  async mounted() {
    await loadECharts();
    // 初始化ECharts图
    this.initECharts();
  },
  methods: {
      initECharts(){
         const chart=echarts.init(document.getElementById('echarts'));
         ...
      }
  }
}