[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发展而来,与 ...
随机推荐
- 记录--前端实习生的这个 bug 被用做了一道基础面试题
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言 测试发现了一个问题,简单描述问题就是通过函数删除一个数组中多个元素,传入的参数是一个数组索引. 然后发现实际效果有时删除的不是想要的 ...
- 记录--vue+three.js 构建 简易全景图
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 最近几天在学习three.js ,因为我相信只有实践才能出真理,捣鼓捣鼓做了一个简易的全景图,这里主要是分享做这个vue版全景图中遇到的问 ...
- rust结构体包含另一个结构体引用时,serde序列化问题
代码如下 use serde::{Deserialize, Serialize}; #[derive(Serialize, Deserialize)] struct Person { id: Stri ...
- Word文档最后一页空白页中换行符无法删除
Word文档最后一页空白页中换行符无法删除 问题如题: 尝试了delete.backspace.backspace+delete都不行. 找到了这个方法: 选中最后一页的换行符,然后段落--间距--行 ...
- Windows线程API —CreateTimerQueueTimer/DeleteTimerQueueTimer的使用
问题代码: 1 #include<windows.h> 2 #include<iostream> 3 #include<thread> 4 HANDLE h1; 5 ...
- Java读取excel文件(.xlsx/.xls)和.csv文件存入MySQL数据库
1 package com.reliable.service; 2 3 import com.csvreader.CsvReader; 4 import com.reliable.bean.FileD ...
- #Multi-SG#Poj 3537 Crosses and Crosses
题目 有\(n\)个格子,可以在上面涂黑,连续三个黑色获胜,问先手是否必胜 分析 如果先手选择第\(i\)个格子涂黑,那么后手对于\(i-1,i+1,i-2,i+2\)一旦涂黑必败, 所以如果第\(i ...
- 优先队列的基本实现【数据结构与算法—TypeScript 实现】
笔记整理自 coderwhy 『TypeScript 高阶数据结构与算法』课程 特性 效率比普通队列高 每个出队元素拥有最高优先级 可以用 数组.链表 等数据结构实现,但是 堆结构 是最常用的实现方式 ...
- 直播预告丨Hello HarmonyOS进阶系列课程重磅来袭,4月27日开播
为了帮助初识HarmonyOS的开发者快速入门,我们曾推出Hello HarmonyOS系列一共5期课程(传送门:https://developer.huawei.com/consumer/cn/tr ...
- 浅析eTS的起源和演进
原文:https://mp.weixin.qq.com/s/N2RPeboN8Fj0-8wBMZJ-7w,点击链接查看更多技术内容. 引言 Mozilla创造了JS,Microsoft创建了TS,Hu ...