仅在需要时加载js脚本

Question

我一直试图通过删除不必要的javascript加载来优化我的网页。在我的索引页面中，我只有一个滑块，但我也有其他一些带有表单的html页面。

我的webpack现在的方式，它创建了一个单一的＆＃34; app.js＆＃34;将所有脚本放在一起：滑块和表单验证。

但我在index.html上没有任何表单，所以我认为加载任何表单验证脚本是错误的，因为我不会使用任何表单。

如何使用延迟加载仅导入我的页面所需的javascript文件？示例：index.html只会加载slider.js，而我的其他包含表单的html页面只会加载我的form_validation.js脚本。

Answer 1

根据 Webpack documentation，您可以执行以下操作。

在index.html页面上

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

在您拥有表单

的HTML页面上

group_by()