使用 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 体积的更多相关文章

  1. vue中input输入第一个字符时,光标会消失,需要再次点击才能输入

    vue中input输入第一个字符时,光标会消失,需要再次点击才能输入 在这里我犯了一个小错误,v-if语法比较倾向于一次性操作,当input获取焦点时,v-if判断为true,立即刷新数据,进行渲染, ...

  2. vue-cli3 项目中通过 CDN方式 使用 echarts

    1.html 中引入 echarts         html中添加script标签如下:         <script src="//cdn.bootcss.com/echarts ...

  3. vue中,对象数组多层嵌套时,更新数据更新页面

    vue中的对象和数组的元素直接赋值修改时,是不能响应到view中去的 1.对象更新 this.a={title:'列表1’}; this.a.title='列表2’; <h1>{{a.ti ...

  4. VUE中实现iview的图标效果时遇到的一个问题

    [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available ...

  5. vue中使用iview表单验证时this指针问题

    需求 使用iview,在提交时对值b进行验证,使其不能大于值a 实现 <Form ref="config" :model="config" :rules= ...

  6. vue中组件传值方式汇总

    在应用复杂时,推荐使用vue官网推荐的vuex,以下讨论简单SPA中的组件间传值. 一.路由传值 路由对象如下图所示: 在跳转页面的时候,在js代码中的操作如下,在标签中使用<router-li ...

  7. vue 中 element-ui 引入方式

    目录 前言 全部引用 单个引用 前言 有时候只会使用到 Element-ui 的部分功能,为了减少文件体积建议使用分开引用,即只引用使用的功能. 注意:在main.js中使用部分引用的时候是 impo ...

  8. 01.在vue中通过 JSONP 方式来跨域

    //1.引入 : 在main.js 中引入该文件即可 //2.使用: axios.jsonp('地址').then(res => { // console.log(res) // } impor ...

  9. vue 中数据共享的方式

    1.父子组件的数据传递2.store模式 - 局部的数据共享3.vuex 中共享 state - 全局的数据共享

  10. C语言中以文本方式读写文件时换行符转换的注意事项

    我们知道在UNIX下是没有回车符(\r)的,只有换行符(\n),而C语言诞生于UNIX(Linux即面向开源的UNIX,Mac OS也是UNIX发展而来的,而Windows是从MS-DOS发展而来,与 ...

随机推荐

  1. flutter版本的玩Android客户端

    flutter学习案例 目录介绍 00.项目下载与查看 01.项目介绍 02.项目优势 03.部分功能介绍 04.部分截图展示 05.版本更新 06.flutter系列博客 07.感谢 08.如何辨别 ...

  2. ItemsControl和ListView、ListBox的区别

    1.ItemsControl用来显示一个数据项的集合,它的底层是一个列表,它可以非常灵活的展示布局和数据 以下是例子 <ItemsControl ItemsSource="{Bindi ...

  3. Java 8 内存管理原理解析及内存故障排查实践

    作者:vivo 互联网服务器团队-  Zeng Zhibin 介绍Java8虚拟机的内存区域划分.内存垃圾回收工作原理解析.虚拟机内存分配配置,介绍各垃圾收集器优缺点及场景应用.实践内存故障场景排查诊 ...

  4. YOLOv1/v2/v3简述 | 目标检测

    YOLO系列是目标检测领域里十分经典的结构,虽然目前已经出了很多更高质量更复杂的网络,但YOLO的结构依然可以给算法工程师们带来很多的启发.这3篇论文看下来,感觉像是一本调参说明书,教你如何使用各种t ...

  5. layui框架使用单页面弹出层组件layer

    layui实现单页面弹出层 首先需要导入layui的js和css: <link rel="stylesheet" href="layui/css/layui.css ...

  6. #Multi-SG#Poj 3537 Crosses and Crosses

    题目 有\(n\)个格子,可以在上面涂黑,连续三个黑色获胜,问先手是否必胜 分析 如果先手选择第\(i\)个格子涂黑,那么后手对于\(i-1,i+1,i-2,i+2\)一旦涂黑必败, 所以如果第\(i ...

  7. #SPFA,动态规划#洛谷 1772 [ZJOI2006]物流运输

    题目 分析 改变航线可以通过费用提前计算实现, 这样就不用增加次数这一维,也没有必要, 设\(dp[i]\)表示前\(i\)天的总费用 那么\(dp[i]=\min\{dp[j-1]+(i-j+1)* ...

  8. Jetty的console-capture模块

    console-capture模块用于记录Jetty运行时向标准输出和标准错误写出的信息. Java的标准输出流,即System.out. Java的标准错误流,即System.err. consol ...

  9. 2023 OpenHarmony年度运营报告

  10. .NET Emit 入门教程:第六部分:IL 指令:5:详解 ILGenerator 指令方法:创建实例指令

    前言: 上上篇介绍了 IL 指令的分类以及参数加载指令,该加载指令以 Ld 开头,将参数加载到栈中,以便于后续执行操作命令. 上一篇介绍参数存储指令,其指令以 St 开头,将栈中的数据,存储到指定的变 ...