Require.context and lazy-loading?

Question

[Artem0071]

Есть некая папка с файлами:
- first.vue
- second.vue
- third.vue
- index.js

index.js:

THIS IS A MAGIC
const context = require.context('./', false, /\.vue$/i)
export default context.keys().reduce((modules, path) => ({
    ...modules,
    [/[a-z]+/i.exec(path).pop()]: context(path).default,
}), {})

Таким образом, в отдельном компоненте можно получить все компоненты из этой папки таким образом:

import someComponents from '../pathWithComponents/index.js'

    export default {
        components: {
            ...someComponents
        },

Это для меня сейчас магия. Долго пытался разобраться в этом небольшом скрипте, но все равно упираюсь в свой потолок и не могу до конца понять его.
Но сейчас нужно переделать это в такой скрипт, чтобы можно было подключить lazy-loading.

Раньше я делал это так:

components: {
            someComponent: () => import('./pathWithComponents/someComponent')
        },

В итоге все подгружалось только по необходимости

Можно ли как то связать эти две вещи? Чтобы и подгружали только по необходимости и чтобы можно было подключить тот магический скрипт
Или это просто технически невозможно сделать?

Answer 1

[fl3nkey]

Вот документация

const requireComponents = {};
const requireComponentContext = require.context('./', false, /\.vue$/i, 'lazy'); //lazy!
requireComponentContext.keys().forEach((fileName, index) => {
	//componentName может быть по названию файла, смотрите пример в документации.
	const componentName = `MySuperComponent-${index + 1}`;
	const componentConfig = requireComponentContext(fileName);
	requireComponents[componentName] = () => componentConfig;
});

//vue instance
export default {
	components: {
		...requireComponents
	}
}

<my-super-component-1></my-super-component-1>
<my-super-component-2></my-super-component-2>
...

Comments

[Artem0071]

Это то же самое что и у меня код. Нужно чтобы это поддерживало lazy-loading

[fl3nkey]

Artem0071, ну если никто не ответит, позже напишу решение.

[Artem0071]

fl3nkey, Буду ждать тогда) Иначе идей вообще нет

[fl3nkey]

Artem0071, обновил ответ

Answer 2

[Дмитрий Беляев]

https://webpack.js.org/api/module-methods/#require...
обратите внимание на 4й необязательный параметр mode, особенно на 'lazy' и 'lazy-once'

Comments

[Artem0071]

Добавил 'lazy', но все равно все разом загружается

[Дмитрий Беляев]

Artem0071, а доку не почитали?

const context = require.context('./', false, /\.vue$/i, 'lazy-once')
export default context.keys().reduce((modules, path) => ({
    ...modules,
    [/[a-z]+/i.exec(path).pop()]: () => context(path),
}), {})

[Artem0071]

Дмитрий Беляев, Ну теперь дополнительные компоненты загружает отдельно от того который их вызывает, но они(доп компоненты) все равно все в одном файле подгружаются, при этом я их даже не использовал в компоненте, просто указал в components:{}

[floydback]

Спасибо за lazy и ссылку! Была похожая проблема, а тут ваш комментарий :)