[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发展而来,与 ...
随机推荐
- App启动页面优化
目录介绍 01.存在白屏问题 1.1 问题描述 1.2 问题分析 02.解决白屏的办法 2.1 解决方案分析 2.2 第一种解决方案 2.3 第二种解决方案 2.4 注意要点 03.Applicati ...
- 记录--通过Promise实现分批处理接口请求
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 如何通过 Promise 实现百条接口请求? 实际项目中遇到需要批量发起上百条接口请求怎么办? 最新案例代码在此!点击看看 前言 不知你项 ...
- 记录--可视化大屏-用threejs撸一个3d中国地图
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 不想看繁琐步骤的,可以直接去github下载项目,如果可以顺便来个star哈哈 本项目使用vue-cli创建,但不影响使用,主要绘制都已封 ...
- 动态水印也能去除?ProPainter一键视频抠图整合包下载
ProPainter是一个基于E2FGVI实现的AI视频编辑工具,它结合了增强的传播和Transformer机制,能够快速高效地进行视频修复和水印去除 功能特点 · 对象移除:智能地检测和移除视频中的 ...
- flume采集nginx日志文件数据到Kafka
flume官网地址http://flume.apache.org/ #下载 wget https://mirrors.bfsu.edu.cn/apache/flume/1.9.0/apache-flu ...
- KingbaseES数据目录结构
KingbaseES数据库结构 [kingbase@postgres V8]$ tree -LP 2 data/ . ├── data │ ├── base # 存储用户创建的数据库文件及隶属于用 ...
- 【放假第1天】采购季倒计时 2G 50/年,4G 618/3年 云服务器选购攻略 阿里云 腾讯云 京东云对比 搭建网站、数据分析
更新日期:4月4日(阿里云价格回调,京东云采购季持续进行) <最新对比表>已更新在文章头部-腾讯云文档,文章具有时效性,请以腾讯文档为准! https://docs.qq.com/do ...
- #ST表,单调栈#洛谷 5648 Mivik的神力
题目 分析 考虑答案应该是一段单调不下降的序列, 考虑预处理出每个点往后第一个大于这个点的位置, 那么答案应该是左端点到区间内最大的位置以及这个位置到右端点的贡献 那么区间最大的位置可以用ST表做,然 ...
- AI数字人互动大屏:如何改变我们的生活?
随着科技的飞速进步和人工智能技术的日益成熟,智能制造正在成为推动制造业转型升级的核心力量. 互动数字人具有强大的情感分析能力,可以根据观众的表情.语气等实时反馈,作出恰当而富有情感的回应.这不仅让每一 ...
- 重新点亮shell————awk函数[十五]
前言 简单介绍一下awk函数. 正文 算术函数 字符串函数 自定义函数 例子: 结 awk就到这里了.