Question

我使用async components，并且只想加载一次软件包，我有这个：

Main_Comp.vue：

<template>
    <div>
        <line-chart v-bind:someData="data"></line-chart>
        <bar-chart v-bind:someData="data"></bar-chart>
    </div>
</template>

<script>
export default {
data() {
    return {
        data: ...,
    }
}
</script>

Bar_Chart.vue：

import {Bar, mixins} from 'vue-chartjs';

export default {
  extends: Bar,
  mixins: [mixins.reactiveProp],
  props: ['someData'],
  data () {
     ...
  }
}

Line_Chart.vue：

import {Line, mixins} from 'vue-chartjs';

export default {
  extends: Line,
  mixins: [mixins.reactiveProp],
  props: ['someData'],
  data () {
     ...
  }
}

像这样的webpack可以制作三个包

              Asset     Size  Chunks                    Chunk Names
js/demo-counties.js   143 kB       8  [emitted]         main-comp
js/bar-chart.js       391 kB       1  [emitted]  [big]  bar-chart
js/line-chart.js      391 kB       1  [emitted]  [big]  line-chart

问题在于图表会不必要地加载相同的程序包（vue-chartjs）或其中的一部分，因为我在两个文件中而不是仅在两个文件中获得了相同的代码（加载的模块），我已经尝试过：

import {Line, Bar, mixins} from 'vue-chartjs';

在Main_Comp.vue上，但它在Line_Chart.vue和Bar_Chart.vue上引发错误，例如：

原因：ReferenceError：未定义行

我想是因为我必须从vue-chartjs包中扩展出来，我已经尝试像道具一样传递Bar，Line，mixins，但错误仍然存在。

Webpack对两个组件使用一个comun模块

0 个答案: