时间戳

首页 > 解决方案 > 仅在需要时加载 js 脚本

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

问题描述

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

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

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

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

标签： javascriptwebpacklazy-loading

解决方案

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

推荐阅读