Почему из асинхронного компонента на выходе получается два файла?

Question

[Сергей Хлопов]

Здравствуйте, есть такой вот компонент, я часть кода не включил сюда, потому что она не нужна в рамках данного вопроса. Имя файла данного компонента - vue-dropzone.vue а путь elements/vue-dropzone.

<template>
    <vue-dropzone
            ref="myVueDropzone"
            id="dropzone"
            :options="dropzoneOptions">
        <p class="dropzone-elem__title">Загрузить изображение</p>
    </vue-dropzone>
</template>
<script>
     import VueDropzone from 'vue2-dropzone'; // Подключаю dropzone которая в node_modules, скачивал с помощью npm
     export default { ... }
</script>

Потом я этот компонент, асинхронно подгружаю в другом компоненте таким вот образом:

const MyDropzone = () => import(/* webpackChunkName: "js/dropzone" */ './../elements/vue-dropzone');

Ожидалось что будет в итоге один файл загружен dropzone.js, и в нём будет мой компонент, и компонент который скачен был с помощью npm vue2-dropzone. Но загружается почему то два файла.

И такие вот пути у них:
http://rtm/vendors~js/dropzone.js
http://rtm/js/dropzone.js

см. скриншот ниже


Я так понимаю что по пути: http://rtm/vendors~js/dropzone.js находиться компонент vue2-dropzone
А по пути: http://rtm/js/dropzone.js уже мой компонент, код которого выше.

Подскажите пожалуйста, почему два файла ? Заранее благодарю за ответ

Answer 1

[Сергей Хлопов]

Похоже что надо копать в эту сторону:
https://webpack.js.org/plugins/split-chunks-plugin/
Проект этот делаю на laravel, используется laravel-mix
Ссылка на документацию из laravel-mix
https://laravel-mix.com/docs/4.0/quick-webpack-con...