Почему данный код не создает lazy-loading чанки?

Question

[Artem0071]

Есть следующий код:

// Тут беру все файлы из папки components
const files = require.context('./components', true, /\.vue$/i);

files.keys().map(key => {
    let componentName = key.split('/').pop().split('.')[0];
// пытаюсь создать динамическую загрузку для этих компонентов
    Vue.component(componentName, () => import(
        /* webpackChunkName: "base-component-" */
        `./components/${componentName}.vue`
    ))
});

В итоге все компоненты все равно билдятся в сам app.js, а чанки не создаются..
Что тут не так?

Это webpack.config (мб тут что то не так):

module.exports = {
    output: {
        chunkFilename: `dist/js/chunks/[name].js`,
    },
};

Answer 1

[0xD34F]

Я вот слышал, будто require.context может принимать какой-то четвёртый параметр по имени mode, у которого значение по умолчанию вовсе НЕ 'lazy'.

Comments

[Artem0071]

Да, но я ведь тут не сами Файлы хочу получить, а только имена файлов которые находятся в папке и путь к ним
А затем передать их во вью с помощью () => import

Но я где то что то видимо упускаю какую то деталь

[Artem0071]

Хмм, сработало :)
Спасибо большое!

Answer 2

[Александр Ме]

Ну у вас нет причин вебпаку создавать чанк - код склеивается.
Я так понял нужны условия или события, которые разделяют код

const components = [
  'cargovoyage.detail',
  'cargovoyage.list',
];

document.addEventListener('DOMContentLoaded', () => {
  components.forEach((component) => {
    const componentClass = component.replace(/\./g, '-');
    if (document.querySelector(`.${componentClass}`)) {
      import(/* webpackChunkName: "[request]" */ `components/${component}`);
    }
  });

  import(/* webpackChunkName: "vessel-form" */ './js/vessel/form');
});