使用 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. 安装npm install报错npm ERR! code ETIMEDOUT npm ERR! errno ETIMEDOUT npm ERR! network request to https://registry.npmjs.org/webpack-subresource-integrity failed, reason

    执行命令:npm run dev 启动前端项目报如下错误,vue-cli-service是Vue一个启动的插件,需要安装 D:\nodejs\npm.cmd run dev > yuntan1h ...

  2. golang gc的内部优化

    今天讲一个常见的gc compiler(也就是官方版本的go编译器和runtime)在垃圾回收的扫描标记阶段做的优化. 我对这个优化的描述印象最深的是在bigcache的注释里,大致内容是如果map的 ...

  3. ElasticSearch中_source、store_fields、doc_values性能比较【转载】

    原文地址请点击 在这篇文章中,我想从性能的角度探讨ElasticSearch 为我们存储了哪些字段,以及在查询检索时这些字段如何工作.实际上,ElasticSearch和Solr的底层库Lucene提 ...

  4. KingbaseES V8R3 运维案例 -- sys_dump备份故障“SYS_MAC_POLICY_ENFORCEMENT”

    ​ 案例说明: 在KingbaseES V8R3执行sys_dump时出现"ERROR: permission denied for relation SYS_MAC_POLICY_ENFO ...

  5. KingbaseES Json 系列五--Json数据操作函数三

    KingbaseES Json 系列五:Json数据操作函数三(JSONB_SET,JSONB_INSERT,JSON_QUERY) JSON 数据类型是用来存储 JSON(JavaScript Ob ...

  6. 前端 Typescript 入门

    前端 Typescript 入门 Ant design vue4.x 基于 vue3,示例默认是 TypeScript.比如 table 组件管理. vue3 官网介绍也使用了 TypeScript, ...

  7. Ubuntu20.04 LTS国内源安装指定版本Docker/docker-compose

    1.卸载旧版本Docker #卸载旧版本docker sudo apt-get remove docker docker-engine docker-ce docker.io #清空旧版docker占 ...

  8. 初识urllib与requests

    urllib与requests 一.urllib的学习 学习目标 了解urllib的基本使用 1.urllib介绍 除了requests模块可以发送请求之外, urllib模块也可以实现请求的发送,只 ...

  9. #排序,去重#洛谷 5682 [CSPJX2019]次大值

    题目 分析 首先,显然要排序去重,考虑最大值应该是\(a_{n-1}\)(排序后) 那次大值只有可能出现在\(a_{n-2}\)或者\(a_n\bmod a_{n-1}\)中 当然去重后如果只有一个数 ...

  10. 【直播回顾】如何成为一名优秀的OpenHamrony贡献者?

    5月18日晚上19点,战"码"先锋第一期直播<如何成为一名优秀的OpenHamrony 贡献者?>,在OpenHarmony社群内成功举行. 本期课程,由润和资深软件开 ...