Vue.js无法将代码分成可加载的小块 我的问题： vue-js-modal问题的示例： vue-js-modal的版本：

问题描述

我的问题：

我无法将vue.js代码拆分成块，我已经尝试了教程中的许多示例。当我尝试不向应用程序加载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

我已经检查了stackoverflow的解决方案，并100％确保此问题与我的代码无关。

解决方法

Webpack进行了优化 this

以下是示例：

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

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

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

否则您的测试将无法捆绑和运行。