推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
vue 如何在单个组件中引入外部包,比如 echarts 或者 jquery?
black11black · 2020-08-12 16:36:31 +08:00 · 2560 次点击这是一个创建于 1563 天前的主题，其中的信息可能已经有所发展或是发生改变。
如题，vue-cli4 构建的项目，现有一需求是某组件需要画图表
想要实现的效果是，在这个只有加载这个组件时才会引入 echarts，而不是绑定到 vue 全局，不会导致打包出来程序过大。应该怎么实现呢？
一个简单想法是，直接在.vue 文件的<html>部分里输入 echarts.min.js 的地址，是否可行？
比如这样
<link href=echarts.min.js rel=preload as=script>
 |
1
murmur 2020-08-12 16:38:01 +08:00
ehcarts 有模块封装和按需引用，webpack2 以上，vue2 以上开 dynamic import 都可以按需引入和懒加载
|
 |
2
redbuck 2020-08-12 17:10:54 +08:00
import('echats')
.then(echats => { }) .catch(console.log) 打包会提取为新的 js,进入页面时才会引入 |
 |
3
xiaoxinshiwo 2020-08-12 20:24:08 +08:00
看官方文档啊
|
 |
4
jorneyr 2020-08-12 21:18:12 +08:00
可以参考这个实现: https://qtdebug.gitee.io/html/vue-in-action/#/%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BD-JS-CSS
// 懒加载 TinyMCE Utils.loadJs('/static-p/lib/tinymce/tinymce.min.js').then(() => { this.initEditor(); }); |
 |
5
ryougifujino 2020-08-12 22:36:05 +08:00
组件懒加载或者包含这个组件的路由懒加载就行了
|
 |
6
Biwood 2020-08-12 22:44:47 +08:00
楼上说的比较清楚了，这是 webpack lazy loading 相关的知识，直接看 webpack 官方文档即可 https://webpack.docschina.org/guides/lazy-loading/
|
 |
7
mxT52CRuqR6o5 2020-08-12 23:46:08 +08:00 via Android
建议用 js 标准提供的能力去实现需求，就像 1l 那样写就行
|
Select Language