使用 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. C#的窗体防闪烁解决方案 - 开源研究系列文章

    昨天编码的时候想到了关于无边框窗体的闪烁问题,主要是改变窗体大小的时候会闪烁,默认的窗体没这个问题.而现在无边框窗体的应用比较多,所以就找了度娘,然后结合自己的经验进行了测试,得到了这个例子,简单有效 ...

  2. verilog基本语法之always和assign

    always和assign的作用 一.语法定义 assign,连续赋值.always,敏感赋值.连续赋值,就是无条件全等.敏感赋值,就是有条件相等.assign的对象是wire,always的对象是r ...

  3. Spring Cloud服务之Nacos作为注册中心与配置中心

    1.创建maven父工程管理jar包版本 创建maven骨架,删除多余部分文件.只留pom文件,添加依赖 <packaging>pom</packaging> <pare ...

  4. OWOD:开放世界目标检测,更贴近现实的检测场景 | CVPR 2021 Oral

    不同于以往在固定数据集上测试性能,论文提出了一个更符合实际的全新检测场景Open World Object Detection,需要同时识别出未知类别和已知类别,并不断地进行增量学习.论文还给出了OR ...

  5. 使用fiddler抓取HTTPS的数据包(抓取App端的数据包)

    众所周知,我们在做接口测试的时候有两种情况: 第一种是先拿到接口测试规范文档,再去做接口测试. 第二种是没有接口文档,只有通过自己抓包. 那么说到抓包,就不得不说抓包工具,对于浏览器web端,我们只需 ...

  6. .NET开源、免费、跨平台的Git可视化管理工具

    前言 俗话说得好"工欲善其事,必先利其器",合理的选择和使用可视化的管理工具可以降低技术入门和使用的门槛.今天大姚给大家分享一款.NET Avalonia开源.免费.跨平台.快速的 ...

  7. 【已解决】IDEA项目启动时Maven报错:Downgrade Maven to version 3.8.1 or earlier in settings

    报错场景如下: Possible solutions: Check that Maven pom files not contain http repository http://mvn.gt.ige ...

  8. 【已解决】ERROR: but there is no HDFS_NAMENODE_USER defined. Aborting operation. Starting datanodes

    export HDFS_NAMENODE_USER=rootexport HDFS_DATANODE_USER=rootexport HDFS_SECONDARYNAMENODE_USER=roote ...

  9. 批量导出导入IIS下所有网站方法

    C:\Windows\System32\inetsrv\config\ applicationHost.config 存放的是网站列表配置信息,复制到目标服务器相同目录下(建议备份目标服务器原文件). ...

  10. reactive stream协议详解

    目录 背景 什么是reactive stream 深入了解java版本的reactive stream Publisher Subscriber Subscription Processor JDK中 ...