使用 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. Android线程池封装库

    目录介绍 1.遇到的问题和需求 1.1 遇到的问题有哪些 1.2 遇到的需求 1.3 多线程通过实现Runnable弊端 1.4 为什么要用线程池 2.封装库具有的功能 2.1 常用的功能 3.封装库 ...

  2. Java原生序列化与反序列化

    序列化与反序列化 Java序列化是指把Java对象转换为字节序列的过程;而Java反序列化是指把字节序列恢复为Java对象的过程. 为什么需要序列化? 序列化分为两大部分:序列化和反序列化.序列化是这 ...

  3. spring boot @Scheduled 单线程的问题

    package com.lxw.lxwDemo; import org.springframework.scheduling.annotation.EnableScheduling; import o ...

  4. 电影数据集【可供机器学习附爬虫源码】(豆瓣、爱奇艺、IMDB、腾讯视频等)

    电影数据集(豆瓣.爱奇艺.IMDB.腾讯视频.搜狐.1905) 爬虫爬取豆瓣.爱奇艺.IMDB.腾讯视频.搜狐.1905网,电影数据. 获取方式:微信搜索关注[靠谱杨阅读人生]回复[电影]. 整理不易 ...

  5. Mybatis-Plus框架的BaseMapper的insert方法和自定义mapper里面的insert方法会用哪个

    在Mybatis-Plus框架中,当一个接口继承了BaseMapper接口,并且绑定了一个xml文件时,如果这个接口和xml文件中都定义了相同的方法,那么在调用该方法时,会优先调用xml文件中的方法, ...

  6. MybatisPlus的那些坑

    1.实体类属性会被错误解析,需要加上注解@TableField @TableField("front_of_id_card") //身份证正面 private String fro ...

  7. Advanced .Net Debugging 6:程序集加载器

    一.简介 这是我的<Advanced .Net Debugging>这个系列的第六篇文章.这篇文章的内容是原书的第二部分的[调试实战]的第四章.这章主要讲的是程序集加载器,比如:CLR 加 ...

  8. #模拟#U137456 数字

    题目 牛牛和他的小伙伴们高高兴兴的吃完了蛋糕,吃完蛋糕之后就到了牛牛和他的小伙伴们最喜欢的环节了--猜数 字, 这次是牛牛的生日,大家决定让牛牛来制定规则,由于牛牛的生日是4月7日,所以牛牛特别喜欢数 ...

  9. 震撼!这个Python模块竟然能自动修复代码!

    说到Python的强大的地方,那真的是太多了,优雅.简洁.丰富且强大的第三方库.开发速度快,社区活跃度高等,所以才使得Python才会如此的受欢迎. 今天给大家介绍一个特别暴力的Python库: Fu ...

  10. C#-GroupBox包含控件,如何获取这些控件的名称

    您可以使用 Enumerable.OfType在GroupBox中查找和投射您的RadioButtons: var radioButtons = groupBox1.Controls.OfType&l ...