[FE] G2Plot 在 Vue 中使用 CDN 方式避免构建时增大 js 体积
2023-09-14 09:02:26 时间
使用 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
相关文章
- Vue.js - 使用Vue实现简简单单的分页功能
- vue中使用input file上传文件
- Vue.js的设计思路
- JS跳转代码_js中跳转页面路径
- todomvc项目_reactive vue
- KUI for Vue.js
- vue页面刷新方法_vue返回上一页怎么实时刷新
- js 生成二维码 vue项目
- vue-router实现路由懒加载( 动态加载路由 )_前端懒加载原理
- Vue分页导航_vue分页组件
- vue父子组件传值props_vue子组件调用父组件的方法并传参
- 2023前端vue面试题(边面边更)_2023-03-01
- java和vue募捐网水滴筹项目捐款爱心系统筹款系统
- vue-grid-layout数据可视化图表面板优化过程所遇问题汇总
- vue.js客服系统实时聊天项目开发(九)热门常问关键词展示
- vue.js客服系统实时聊天项目开发(十八)仿淘宝商品页面点在线客服传递产品卡片
- 原生 JS 实现 HTML 转 Markdown ,html2md.js
- Vue.js是什么?它有什么特点?
- JS实时链接Oracle让数据库访问更便捷(js实时连接oracle)
- Vue用Redis储存获取数据(vue获取redis)