CODEWITHSUNDEEP
javascriptwebpacklazy-loading
Leandro Battochio
Leandro Battochio

Reputation: 364

load js scripts only when needed

I've been trying to optimize my webpage by removing uncessary javascript loading. In my index page I have only a slider but I have some other html pages with forms too.

The way my webpack is now, it creates a single "app.js" with all scripts together: slider stuff and forms validation.

But I don't have any forms on index.html so I think its wrong to load any form validation script as I will not use any of them.

How can I use lazy-loading to import only the javascript files I need for my pages? Example: index.html will only load the slider.js and my other html page which contains forms will load only load my form_validation.js script.

Upvotes: 0

Views: 1255

Answers (1)

gayashanbc
gayashanbc

Reputation: 1014

According to the Webpack documentation, you can do something like this.

On the index.html page

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

On the HTML page where you have the form

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

Upvotes: 1

Related Questions