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

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

Есть следующий код:
// Тут беру все файлы из папки 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`,
    },
};
  • Вопрос задан
  • 134 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Я вот слышал, будто require.context может принимать какой-то четвёртый параметр по имени mode, у которого значение по умолчанию вовсе НЕ 'lazy'.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
lifestar
@lifestar
Видео-продакшн, wordpress специалист
Ну у вас нет причин вебпаку создавать чанк - код склеивается.
Я так понял нужны условия или события, которые разделяют код

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');
});
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы