webpack打包有700K是正常的吗? about v-charts HOT 7 CLOSED

如果我遇到了类似的问题，可能会这样做：

在每个页面组件里面，按需加载 所需要的图表,这样，a页面没有用到图表就不会加载任何图表代码；b页面中用到了 VeLine，就会加载 VeLine 图表的代码，而不是加载所有的，因为其他的图表对于b页面无意义，额外加载这些东西只会延长加载时间；c页面用到了 VeLine、VeBar，因为 Veline 已经加载过一次，所以直接从 cache 里面读，VeBar没有加载过，就再加载一次。等下次再打开b或c页面的时候，因为VeLine,VeBar都已经被浏览器缓存了下来，所以就不需要再重新加载了。直到你更新了一个v-charts版本，重复上面的过程。

体现在代码上大致是这样

// b.vue

const VeLine = () => import('v-charts/lib/line') // vue 2.4.0+
// vue 2.4.0- : const VeLine = resolve => require(['v-charts/lib/line'], resolve)

components: { Veline }

// c.vue

const VeLine = () => import('v-charts/lib/line')
const VeBar = () => import('v-charts/lib/bar')

components: { Veline, VeBar }

在代码上，稍微多写个一两行，来换取性能上的提升，是绝对有意义的。

from v-charts.

方法一：

import { VeLine, VeBar } from 'v-charts/lib/index.esm'

方法二：

import VeLine from 'v-charts/lib/line'
import VeBar from 'v-charts/lib/bar'

方法三：

const VeLine = resolve => require(['v-charts/lib/line'], resolve)
const VeBar = resolve => require(['v-charts/lib/bar'], resolve)

为了测试不同的打包方式 打包出来的大小，只有这两行代码有改动！

from v-charts.

在项目里面是以何种方式引入的图表呢？
import VeCharts from 'v-charts' or
import VeLine from 'v-charts/lib/line' or
import { VeLine } from 'v-charts/index.esm' ?

from v-charts.

import VeCharts from 'v-charts'是这种方式的 这个方式打包是690K

因为打包出来的比较大 特地用import VeLine from 'v-charts/lib/line这种方式 其中几个图标单独打包出来的话都是在240K这样大小

from v-charts.

没错，如果全局引入的话，就会将所有的内容都打包进去，这样体积就会很大，最好是使用单独引入的方式，

import VeLine from 'v-charts/lib/line'
Vue.component(VeLine.name, VeLine)
// 或者
components: { VeLine }

如果用到的图比较多的话，可以使用这种形式，借助webpack的tree-shaking处理掉不可达代码

import { VeLine, VeBar } from 'v-charts/lib/index.esm'
Vue.component(VeLine.name, VeLine)
Vue.component(VeBar.name, VeBar)

from v-charts.

好的大神,不胜感激!!!
现在是在main.js里面整个引入v-charts,然后Vue.use它,这样带来一个问题就是在没有访问图表时候就加载了这个插件,但是我又不想单个图表功能进行单独的引用,这样的话有办法实现按需加载吗?
就是访问图表的时候才整体加载整个插件,然后不同的图表只加载一次

from v-charts.

无比感谢大佬

from v-charts.