vue懒加载优化的问题

Question

今天在优化项目代码，看到可以用代码分离的方式按需加载，加快首屏启动速度。

• 原代码

import VJsoneditor from 'v-jsoneditor'
Vue.component('VJsoneditor',VJsoneditor)

• 优化后

const VJsoneditor=()=>import('v-jsoneditor')
Vue.component('VJsoneditor',VJsoneditor)

这样实现了只有需要用到这个组件时才去后台请求对应的js文件。

但这种方式只解决了组件按需加载，我现在需要让项目中用到的echarts也实现按需加载，现在的写法是：

• main.js

import echarts from 'echarts'
Vue.prototype.$echarts = echarts;

优化后改写成下面的代码

const echarts=()=>import('echarts');
Vue.prototype.$echarts = echarts;

但这种写法会报错，为什么？要怎么修改？

Answer 1

这个问题。你难道不能把 echarts 放在 VJsoneditor 组件中吗？

vue 是组件系统支持异步。你这赋值哪能支持呀。想支持也能，你调用的地方都要改

Answer 2

可以把 echarts 用 script 标签通过 cdn 引入，然后配置 webpack 不打包 echarts