javascript - 仅在需要时加载js脚本

Question

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

我的 webpack 现在的方式是，它创建一个包含所有脚本的单个“app.js”: slider 内容和表单验证。

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

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

Answer 1

根据Webpack documentation ，你可以做这样的事情。

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