javascript - 与 webpack 捆绑后，纠正 Javascript 错误，因为元素不存在于当前页面中

<分区>

关闭。这个问题需要details or clarity .它目前不接受答案。

想改进这个问题吗？ 通过 editing this post 添加细节并澄清问题.

关闭 4 年前。

我目前在一个没有任何 bundler 的项目中使用 webpack。它有几个 html 页面和一些与每个页面关联的 javascript 文件。

捆绑这些文件后，我发现我收到错误，因为“页面 B”上不存在“元素 A”，因此会引发错误。

这里最好的方法是什么？检查每个事件监听器的“如果”是一个好习惯吗？这对我来说似乎有点不对劲。有没有更好的办法？创建一个包含所有 DOM 元素的对象并导入它？

我想我是在问这个特定案例是否有最佳实践。

最佳答案

你基本上有三个选择:

创建仅包含与该页面相关的脚本的每页包。如果多个页面使用了很多脚本代码，这意味着每个包都将包含该脚本代码；如果用户在您的项目中逐页移动，他们将重新下载这些公共(public)位作为每个单独包的一部分。与选项 #2 相比， bundle 的那些冗余部分将消耗更多的带宽和缓存空间(再次假设您的项目中的页面到页面导航)。
创建一个所有页面都使用的 uber-bundle，并执行您提到的检查元素是否存在的检查，这可以很容易地封装在一个函数中。这意味着用户将为他/她可能永远不会访问的页面加载脚本代码。
两者结合:在每个页面上使用两个包，一个包含所有(或大多数)页面使用的所有常用脚本，另一个包含每页脚本。

您选择哪一个完全取决于您。需要考虑的是项目中页面到页面导航的程度、 bundle 的总体大小、使用或多或少的带宽和缓存空间，以及可能还有一些我没有想过要列出的事情。 :-)

关于javascript - 与 webpack 捆绑后，纠正 Javascript 错误，因为元素不存在于当前页面中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53747553/

相关文章：

javascript - 将 e.location 字符串拆分为变量