V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member Sign In
推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
This topic created in 2085 days ago, the information mentioned may be changed or developed.
如题，vue-cli4 构建的项目，现有一需求是某组件需要画图表
想要实现的效果是，在这个只有加载这个组件时才会引入 echarts，而不是绑定到 vue 全局，不会导致打包出来程序过大。应该怎么实现呢？
一个简单想法是，直接在.vue 文件的<html>部分里输入 echarts.min.js 的地址，是否可行？
比如这样
<link href=echarts.min.js rel=preload as=script>
 |
1
murmur Aug 12, 2020
ehcarts 有模块封装和按需引用，webpack2 以上，vue2 以上开 dynamic import 都可以按需引入和懒加载
|
 |
2
redbuck Aug 12, 2020
import('echats')
.then(echats => { }) .catch(console.log) 打包会提取为新的 js,进入页面时才会引入 |
 |
3
xiaoxinshiwo Aug 12, 2020
看官方文档啊
|
 |
4
jorneyr Aug 12, 2020
可以参考这个实现: 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 Aug 12, 2020
组件懒加载或者包含这个组件的路由懒加载就行了
|
 |
6
Biwood Aug 12, 2020
楼上说的比较清楚了，这是 webpack lazy loading 相关的知识，直接看 webpack 官方文档即可 https://webpack.docschina.org/guides/lazy-loading/
|
 |
7
mxT52CRuqR6o5 Aug 12, 2020 via Android
建议用 js 标准提供的能力去实现需求，就像 1l 那样写就行
|
Select Language