webpack - ES6 导入 Vue

Question

我这样创建了我的服务文件:

import Vue from 'vue'

var service = {
    counter : 1,
    loadProducts : function(){
        return Vue.http.get('http://www.json-generator.com/api/json/get/cqLJAlYsPm?indent=2');
    }
}

export default service

并且我已经将它导入到我的单个组件中

<!-- src/components/ProductList.vue -->
<template>
    <table class="table table-hover product-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="product in products" track-by="id">
                <td>{{product.about}}</td>
                <td>{{product.address}}</td>
                <td>{{product.age}}</td>
            </tr>
        </tbody>
    </table>
</template>

<script>    
    import service from './my-service.js'

export default {
    created: function(){
        service.counter++;
        console.log(service);
        console.log('created');

        service.loadProducts().then(response => {
            this.products = response.data;
        });

    },
  data () {
    return {
        products: []
    }
  }
}
</script>

这是编写 API 调用的正确方法吗？如果我在服务文件中导入 Vue:

import Vue from 'vue'

这会再次包含在我的 js 文件中吗？所以每次我写 import Vue 时，我的 JS 文件都会不断膨胀？

Answer 1

If I import Vue in service file [...] will this be included in my js file again? So everytime I write import Vue the my JS file would keep bloating?

如果你不是code splitting , 那么不，vue 模块将不会在同一个 block 中多次包含，nor will that module be initialized every time it is imported .如果你是代码拆分，那么你需要使用 CommonsChunkPlugin至 prevent duplication跨多个 block 的同一模块(如果您担心的话)。