Я создал миксин, который хочу использовать в некоторых компонентах, где вам нужно динамически импортировать дочерний компонент, где путь к этому компоненту получен через компонент более высокого уровня.
Проблема в том, что в данном компоненте происходит медленная компиляция веб-пакета, от 1509 до 420000 мс, и я не могу понять, почему.
однако, если я вызываю mixin в другом компоненте, компиляция происходит медленнее, чем обычно, но это минимальная разница.
Что я делаю не так, чтобы это случилось?
Структура и код
Helper
const loaderComponent = (path) => () => import(/* webpackChunkName: '[request]' */ `../vue/${path}`).then(m => m.default || m);
export default loaderComponent;
Mixin
import loaderComponent from '../loaderComponent';
export default {
created() {
this.component = loaderComponent(`components/${this.pathComponent}`);
}
}
дочерний компонент
<template>
<div>
<component
:is="component"
/>
</div>
</template>
<script>
import mixinLoaderComponent from '../../../helpers/mixins/mixinLoaderComponent';
export default {
mixins: [mixinLoaderComponent],
props: {
pathComponent: String,
typeOfValidator: String
},
data () {
return {
component: null,
validator: {}
}
},
created() {
import(`../../../validations/${this.typeOfValidator}.js`).then( validator => {
this.validator = validator.default;
});
}
},
}
</script>
Родитель 1
<template>
<child pathComponent="path" typeValidator="type" />
</template>
Родитель 2
<template>
<child pathComponent="path" typeValidator="type" />
<child pathComponent="path" typeValidator="type" />
<child pathComponent="path" typeValidator="type" />
<child pathComponent="path" typeValidator="type" />
</template>
Родитель 3
<template>
<child pathComponent="path" typeValidator="type" />
<child pathComponent="path" typeValidator="type" />
</template>