Webpack - Разделение кода: разбить библиотеку на собственный файл - PullRequest
Новая
       7

Webpack - Разделение кода: разбить библиотеку на собственный файл

0 голосов
/ 01 октября 2019

Я использую чанки веб-пакетов для разделения моих компонентов

Использование этих двух библиотек -

  1. "babel-plugin-dynamic-import-webpack": "^ 1.1.0",
  2. " babel-plugin-syntax-dynamic-import ":" ^ 6.18.0 ",

Когда я выполняю отложенную загрузку компонентов -

const component1 = () => import(/* webpackChunkName: "components" */ '../components/Component1.vue');

Это работает нормально, но когда я пытаюсь лениво загрузить библиотеку, такую ​​как bootstrap-vue - 

const BootstrapVue = () => import(/* webpackChunkName: "bootstrap-vue" */ 'bootstrap-vue')
Vue.use(BootstrapVue);

Это дает мне ошибку, говоря, что bootstrap-vueкомпоненты неизвестны -

Сообщение об ошибке: Unknown custom element: <b-container> - did you register the component correctly?

Но если я просто сделаю это нормально import BootstrapVue from 'bootstrap-vue', все будет работать нормально. Но он не разделяет код.

Какой хороший способ импортировать библиотеку с разбивкой на фрагменты веб-пакетов и создавать собственный файл?

Конфигурация веб-пакетов. Я использую Laravel-Mix - 

webpackConfig.output = {
    chunkFilename: 'js/[name].bundle.js',
    publicPath: '/',
}

1 Ответ

1 голос
/ 06 октября 2019

import возвращает обещание. Итак, это: 

const promise = import(/* webpackChunkName: "bootstrap-vue" */ 'bootstrap-vue');

promise.then(BootstrapVue => {
  Vue.use(BootstrapVue);
  new Vue({
    render: h => h(App)
  }).$mount('#app');
});

будет Bootstrap Vue после разрешения Обещания.

...