Javascript 仅在需要时加载js脚本

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

就像我现在的网页包一样，它创建了一个包含所有脚本的“app.js”：滑块和表单验证

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

---

如何使用延迟加载仅导入页面所需的javascript文件？示例：index.html将只加载

slider.js

，而我的另一个包含表单的html页面将只加载我的

表单验证.js

脚本。

根据网页包，您可以这样做

在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');
}

---

你在使用ReactJS吗？如果你使用builder，你可能需要Google代码拆分，tree shacking（RollupJS）或代码拆分（ParcelJS，Webpack）也可以帮助你。你可能会对和感兴趣，它们可以透明地完成这件事。不，我纯粹是使用Webpack和npm向我的网站添加模块。我已经在谷歌上搜索过了，但找不到答案。如果我这样做了，我就不会在这里了……嗯。。但是我必须在我的每一页中手动添加这段代码，对吗？我设计网站的方式是通过GET参数，我在一些

div

标签中使用

include\u once

来保存给定页面名称所显示的内容。这样，您所说的js脚本将位于页面底部包含的

app.js

之前。我不能有一个更自动的方法吗？文档说它只加载一次特定的JS块，一旦加载，你就不必在每个页面中再次重新加载。我发现

htmlwebpack

几乎就是我想要的。我可以用它指定页面必须有哪些块。但是，我需要使用一个模板文件，它的工作，我不想重写我所有的网站模板模式。你知道什么解决办法吗？恐怕不知道。对不起:(