echarts组件打包体积分析

打包体积

在图片统计的菜单页面按需引入 14个js(7个无名)

组件中按需引入 图表

js 复制代码
require('echarts/theme/macarons'); // echarts theme
import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
// 引入提示框,标题,直角坐标系,数据集,内置数据转换器组件,组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

打包体积最大的是images_statistics.js,为349kb

chunk-vendors.js 体积为290kb

images_statistics.j + chunk-vendors.js 的体积和为约640kb

入口main.js中全局引入,会导致chunk-vendors.js打包体积变大 14个js(7个无名)

可以看到,最大的是400kb

images_statistics.js + chunk-vendors.js 的体积和为约640kb

如果在入口文件中全局引入echarts 14个js(7个无名)

可以看到,chunk-vendor.js的体积会高达 619kb

同时,images_statistics.j的体积会减小到 3kb

二者之和为 620多kb

组件懒加载后 18个js(11个无名)

无名的971.js体积最大,为 347kb

chunk-vendor.js的体积会高达 289kb

对比图

对比可以看出,按需引入明显比全局引入要好,全局引入会导致入口js的体积变大,不如分开成两个js, 若在main.js中按需引入,会导致首屏加载变慢,考虑到本项目的图表集中展示在图片统计页面,可以将按需加载的位置放到图片统计页面。 至于是在图片统计页面懒加载引入三个业务图表组件,还是非懒加载引入,二者的体积相差不大,但懒加载的话,js会变多,请求次数会增加, 由于浏览器同一时间针对同一域名下的请求有一定数量限制,超过限制数目的请求会被阻塞。 综合考虑,图表统计页的三个图表组件使用非懒加载组件的方式,echarts图按需引入。 当然,如果使用图表的业务模块很分散,建议还是在入口文件中全局引入即可。

相关推荐
abigale0317 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者36 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile40 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_4166399742 分钟前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊1 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火1 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
耶啵奶膘7 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家8 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能