@Artem0071
Безработный mr. Junior

Require.context and lazy-loading?

Есть некая папка с файлами:
- 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')
        },

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

Можно ли как то связать эти две вещи? Чтобы и подгружали только по необходимости и чтобы можно было подключить тот магический скрипт
Или это просто технически невозможно сделать?
  • Вопрос задан
  • 1924 просмотра
Решения вопроса 2
FLUNKEY
@FLUNKEY
самовар
Вот документация

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>
...
Ответ написан
bingo347
@bingo347 Куратор тега JavaScript
Crazy on performance...
https://webpack.js.org/api/module-methods/#require...
обратите внимание на 4й необязательный параметр mode, особенно на 'lazy' и 'lazy-once'
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
28 мар. 2024, в 18:16
1000 руб./за проект
28 мар. 2024, в 18:15
90000 руб./за проект
28 мар. 2024, в 18:05
5000 руб./за проект