[FE] G2Plot 在 Vue 中使用 CDN 方式避免构建时增大 js 体积

使用 npm、yarn 方式安装的包,虽方便使用,但是会极大增加 vendor.xx.js 体积,拖慢网站运行速度。
以 G2Plot 为例,实际在 build 构建时,会下载一些额外字体到 vendor.xx.js 中。
要解决这个问题,选择引入 CDN 是比较常见的方式,在 Vue 中可以参考如下写法:
在 index.html header 中引入 g2plot.min.js,并加 G2Plot 挂到 window 上面。
<script src="https://xxxxx/g2plot.min.js"></script>
<script>window._G2Plot = G2Plot</script>
之后在 .vue 文件中就可以使用 window._G2Plot.Line('xx') 这种方式了。
Refer:快速使用G2Plot
Link:https://www.cnblogs.com/farwish/p/12940820.html
[FE] G2Plot 在 Vue 中使用 CDN 方式避免构建时增大 js 体积的更多相关文章
- vue中input输入第一个字符时,光标会消失,需要再次点击才能输入
vue中input输入第一个字符时,光标会消失,需要再次点击才能输入 在这里我犯了一个小错误,v-if语法比较倾向于一次性操作,当input获取焦点时,v-if判断为true,立即刷新数据,进行渲染, ...
- vue-cli3 项目中通过 CDN方式 使用 echarts
1.html 中引入 echarts html中添加script标签如下: <script src="//cdn.bootcss.com/echarts ...
- vue中,对象数组多层嵌套时,更新数据更新页面
vue中的对象和数组的元素直接赋值修改时,是不能响应到view中去的 1.对象更新 this.a={title:'列表1’}; this.a.title='列表2’; <h1>{{a.ti ...
- VUE中实现iview的图标效果时遇到的一个问题
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available ...
- vue中使用iview表单验证时this指针问题
需求 使用iview,在提交时对值b进行验证,使其不能大于值a 实现 <Form ref="config" :model="config" :rules= ...
- vue中组件传值方式汇总
在应用复杂时,推荐使用vue官网推荐的vuex,以下讨论简单SPA中的组件间传值. 一.路由传值 路由对象如下图所示: 在跳转页面的时候,在js代码中的操作如下,在标签中使用<router-li ...
- vue 中 element-ui 引入方式
目录 前言 全部引用 单个引用 前言 有时候只会使用到 Element-ui 的部分功能,为了减少文件体积建议使用分开引用,即只引用使用的功能. 注意:在main.js中使用部分引用的时候是 impo ...
- 01.在vue中通过 JSONP 方式来跨域
//1.引入 : 在main.js 中引入该文件即可 //2.使用: axios.jsonp('地址').then(res => { // console.log(res) // } impor ...
- vue 中数据共享的方式
1.父子组件的数据传递2.store模式 - 局部的数据共享3.vuex 中共享 state - 全局的数据共享
- C语言中以文本方式读写文件时换行符转换的注意事项
我们知道在UNIX下是没有回车符(\r)的,只有换行符(\n),而C语言诞生于UNIX(Linux即面向开源的UNIX,Mac OS也是UNIX发展而来的,而Windows是从MS-DOS发展而来,与 ...
随机推荐
- iis管理器界面打不开
iis管理器界面打不开 图形界面打不开 服务正常运行 开始->运行->输入以下重置下 inetmgr.exe /reset
- [Python]细节、经验
[版权声明]未经博主同意,谢绝转载!(请尊重原创,博主保留追究权) https://blog.csdn.net/m0_69908381/article/details/132333324 出自[进步* ...
- [MAUI]模仿哔哩哔哩的一键三连
@ 目录 创建弧形进度条 绘制弧 准备物料 创建气泡 创建手势 创建交互与动效 项目地址 哔哩哔哩(Bilibili)中用户可以通过长按点赞键同时完成点赞.投币.收藏对UP主表示支持,后UP主多用&q ...
- 【Pavia】遥感图像数据集下载地址和读取数据集代码
[Pavia]遥感图像数据集下载地址和读取数据集代码 目录 [Pavia]遥感图像数据集下载地址和读取数据集代码 前言 Pavia数据集 Pavia数据集地址: Pavia数据集预览 PaviaU.m ...
- Spring Cloud项目搭建版本选择
1.查看spring cloud的版本 https://github.com/alibaba/spring-cloud-alibaba/wiki/%E7%89%88%E6%9C%AC%E8%AF%B4 ...
- Kingbase ES 游标跨事务及其案例一则
前言 本文介绍游标在PLSQL和SQL层跨事务使用案例,及其案例一则. 本文验证版本: db0=# select version(); db0-# / version ---------------- ...
- 浅谈 KingbaseES 和 SQLServer 中的 instead of 触发器
本文基于Kingbase和SqlServer的INSTEAD OF 触发器主要功能特点进行对比浅析,同时针对SqlServer 的INSTEAD OF 触发器提出了多种kingbase环境的等价代码方 ...
- KingbaseES V8R6 集群运维案例--备库timeline not contain minimum recovery point故障
案例现象: KingbaseES V8R6集群备库启动后,加入集群失败,sys_log日志信息提示,如下图所示: 适用版本: kingbaseES V8R6 一.问题分析 在timeline对应的 ...
- JS实现打开报表时默认为最后一次查询参数
问题描述 普通报表在打开时希望参数面板中的参数控件的值可以默认是上一次页面关闭前最后一次查询所选择的值. 解决方案 每次在页面关闭时将参数值保存到浏览器缓存中(适用用非FS平台),或每次点击查询后将参 ...
- Unit 1 Computer hardware【石家庄铁道大学-专业英语课程复习资料】
Unit 1 Computer hardware 1.Introduction of computer A computer is a machine that can be instructed t ...