загружать JS-скрипты только при необходимости

Question

Я пытался оптимизировать свою веб-страницу, удалив ненужную загрузку JavaScript. На моей странице указателя у меня есть только слайдер, но у меня есть и другие HTML-страницы с формами.

Теперь, как мой веб-пакет, он создает один «app.js» со всеми сценариями вместе: слайдер и проверка форм.

Но у меня нет никаких форм в index.html, поэтому я считаю неправильным загружать любой скрипт проверки формы, так как я не буду использовать ни один из них.

Как я могу использовать отложенную загрузку, чтобы импортировать только те файлы JavaScript, которые мне нужны для моих страниц? Пример: index.html будет загружать только slider.js, а моя другая html-страница, содержащая формы, будет загружать только мой form_validation.js скрипт.

Answer 1

Согласно документации Webpack , вы можете сделать что-то подобное.

На странице index.html

document.onload = async function(){
    const slider = await import(/* webpackChunkName: "slider" */ 'slider');
}

На странице HTML, где у вас есть форма

document.onload = async function(){
    const form_validation = await import(/* webpackChunkName: "form_validation" */ './form_validation');
}