使用 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. Orleans - 1 .NET生态构建分布式系统的利器

    在当今数字化时代,构建高效.可靠的分布式系统是许多企业和开发团队面临的挑战.微软的 Orleans 框架为解决这些挑战提供了一个强大而简单的解决方案.本文将介绍 Orleans 的核心概念,并通过一个 ...

  2. archlinux开机出现错误Dependency failed for /home. Dependency failed for Local File System Time outwaiting for device /dev/disk/...

    错误如下 Dependency failed for /home. Dependency failed for Local File System Time outwaiting for device ...

  3. 论文阅读小结(B/S和C/S结构)

    论文阅读小结 一.B/S 和 C/S 软件体系结构选择 1) C/S . B/S 结构概述 C/S 结构,即 Client/Server (客户机 / 服务器 ), C/S 结构软件分为客户机和服务器 ...

  4. 【已解决】(MySQL)SQL注入绕过登陆验证直接登陆---用户名输入框注释sql密码语句段

    今天学习了一种sql注入方法,通过注释密码验证部分的sql语句. 这是登陆界面 在用户名如果输入 15284206891' and 1=1 # 密码可以随意输入即可登陆成功 原理如下: 在sql可视化 ...

  5. 论文阅读:A new approach solve the multi-product multi-period inventory lot sizing with supplier selection problem

    论文:A new approach solve the multi-product multi-period inventory lot sizing with supplier selection ...

  6. OpenHarmony 4.0 Beta2新版本发布,邀您体验

     2023年8月3日,OpenAtom OpenHarmony(简称"OpenHarmony")发布了Beta2版本,相较于历史版本我们持续完善ArkUI.文件管理.媒体.窗口.安 ...

  7. OpenHarmony 官网文档有哪些上新?下篇:设备开发文档上新

    为了方便社区开发者更易获取 OpenAtom OpenHarmony(以下简称"OpenHarmony")相关文档,暨上篇应用开发文档上新内容,SIG Docs  小组同步准备了设 ...

  8. 本周四晚19:00知识赋能第六期第5课丨OpenHarmony WiFi子系统

    OpenAtom OpenHarmony(以下简称"OpenHarmony")开源开发者成长计划项目自 2021 年 10 月 24 日上线以来,在开发者中引发高度关注. 成长计划 ...

  9. Nacos 无法注册服务

    情况描述: Nacos服务搭建完成. 引入了Nacos的依赖. <!-- SpringCloud Alibaba 服务管理 --> <dependency> <group ...

  10. openEuler20.03操作系统上安装部署MogDB2.1.1

    openEuler20.03 操作系统上安装部署 MogDB2.1.1 本文出处:https://www.modb.pro/db/378319 openEuler 操作系统上安装 mogdb: 下载 ...