Vue.js不能将代码分成可加载的小块

Question

我的问题是：

我不能将vue.js代码分割成块，我已经尝试了很多教程中的例子。当我试图不用app加载vue component并将其拆分时，例如用v-if="show_component"，得到了一个错误component included, but not used。我不知道如何分割代码，并在需要时使用components。在实践中，没有任何工作的例子。

​

vue-js-modal问题的示例

不能将调制解调器分割成可加载的块。只有当它们触发打开时，我才需要加载调制解调器。它将缩小首页加载大小。但这个选择是不可能的。这是我的情态结构：

/src/components/Modals/ExampleModal.vue

<template>
    <modal name="examplemodal" class="examplemodal-modal" :adaptive="true" :max-width="450">
        <div class="header row">
            <h3>Title is here</h3>
            <v-icon name="times" />
        </div>

        <div class="content col">
            <p>
                <b>Some content</b>
                <br /><br />
                More text here...
            </p>
        </div>
    </modal>
</template>

<style lang="scss">
.examplemodal-modal {
    background: rgba(9, 15, 30, 0.3);

    .vm--modal {
        //  I got here a lot of styles in modals
    }
}
</style>

/src/main.js

import Vue from 'vue';
import App from './App';
import Icon from 'vue-awesome/components/Icon';
import VModal from 'vue-js-modal';

Vue.component('v-icon', Icon);
 /* Tried to make loadable modals, divided to chunks */
Vue.use(VModal, { dynamic: true, injectModalsContainer: true });

Vue.config.productionTip = false;

new Vue({
    store,
    render: h => h(App),
}).$mount('#app');

/src/App.vue

<template>
    <div id="app">
        <modals-container />

                <button class="btn green" @click="showModal">
            Show modal
        </button>
    </div>
</template>

<script>
import ExampleModal from './components/ExampleModal.vue';

export default {
    name: 'App',
        methods: {
            showModal() { this.$modal.show(ExampleModal ) } // Shows empty modal
        }
};
</script>

模态仍然不能划分为可加载的块。如果你有什么想法，请帮帮我。

vue-js-modal版本

^2.0.0-rc.3

我已经检查了堆栈溢出的解决方案，并且100%确定此问题与我的代码无关。

Answer 1

Webpack有一个优化Webpzck优化

下面是一个例子：

optimization: {
  splitChunks: {
    cacheGroups: {
      commons: {
        test: /[\\/]node_modules[\\/]/,
        minSize: 10000,
        maxSize: 250000,
      }
    }
  }
}

如果您有一个测试文件夹，则应该设置

test: /[\\/]node_modules[\\/]/,

或者您的测试无法打包和运行。