[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发展而来,与 ...
随机推荐
- CoordinatorLayout滑动抖动问题
目录介绍 01.CoordinatorLayout滑动抖动问题描述 02.滑动抖动问题分析 03.自定义AppBarLayout.Behavior说明 04.CoordinatorLayout滑动抖动 ...
- .NET Emit 入门教程:第一部分:Emit 介绍
前言: Emit 是开发者在掌握反射的使用后,进阶需要的知识,它能显著的改善因反射带来的性能影响. 目前能搜到的 Emit 的相关文章,都是一篇系列,通常推荐对照着反绎后的 IL 编写 Emit 代码 ...
- XSS 从 PDF 中窃取数据
XSS 从 PDF 中窃取数据 将服务器端 XSS 注入到动态生成的 PDF 中 在 hack the box 的 Book 机器(Scripting Track)上,我遇到了一个 Web 应用程序, ...
- 记录--uni-app App端半屏连续扫码
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 本文用一个简单的 demo 讲解 App端 半屏连续扫码 的实现方式,包括(条形码.二维码等各种各样的码). 我会从实现思路讲起,如果你比 ...
- 一文搞懂idea中的根目录和路径(以Mybatis为例)
一文搞懂idea中的根目录和路径(以Mybatis为例) 在 IntelliJ IDEA 中,项目结构和组织比较灵活,允许用户根据项目需求进行定制. 1.根目录概念: 1.1 项目根目录(Projec ...
- vue3中使用simple-keyboard实现虚拟键盘(带中文切换数字键盘)
效果图 官网 simple-keyboard官网:https://hodgef.com/simple-keyboard/ 打不开的话请用魔法 不足 中文语言包支持度不够.不过自己可以找语言包替换 依赖 ...
- mysql统计所有分类下的数量,没有的也要展示
要求统计所有分类下的数量,如果分类下没有对应的数据也要展示.这种问题在日常的开发中很常见,每次写每次忘,所以在此记录下. 这种统计往往不能直接group by,因为有些类别可能没有对应的数据 这里有两 ...
- C#第一个helloworld程序
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 usin ...
- C++设计模式 - 门面模式(Facade)
接口隔离模式 在组件构建过程中,某些接口之间直接的依赖常常会带来很多问题.甚至根本无法实现.采用添加一层间接(稳定)接口,来隔离本来互相紧密关联的接口是一种常见的解决方案. 典型模式 Facade P ...
- #2-SAT,Tarjan,前缀优化建边#洛谷 6378 [PA2010]Riddle
题目 \(n\) 个点 \(m\) 条边的无向图被分成 \(k\) 个部分.每个部分包含一些点. 请选择一些关键点,使得每个部分恰有一个关键点,且每条边至少有一个端点是关键点. 分析 每条边至少有一个 ...