与Webpack捆绑后，更正Javascript错误，因为当前页面中没有元素

Question

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

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

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

我想我想问的是这种情况下是否有最佳实践。

Answer 1

您基本上有三个选择：

1. 创建每页捆绑软件，其中仅包括与该页面相关的脚本。如果多个页面使用了很多脚本代码，则意味着每个捆绑软件都将包含该脚本代码。如果用户在您的项目中在页面之间移动，他们将重新下载这些通用位，作为每个单独捆绑包的一部分。与选项＃2相比，捆绑包中那些多余的部分将消耗更多的带宽和缓存空间（同样，假设您的项目中进行了页面到页面的导航）。

2. 创建一个所有页面都使用的超级捆绑程序，并进行您提到的那些检查是否存在某个元素，这些元素可以很容易地封装在函数中。这意味着用户将为他/她可能从未访问过的页面加载脚本代码。

3. 两者的组合：在每个页面上使用两个捆绑软件，一个捆绑包含所有（或大多数）页面使用的所有通用脚本，另一个捆绑每个页面的脚本。

您所追求的完全取决于您。要考虑的事情是项目中页面到页面的导航程度，捆绑包的整体大小，使用或多或少的带宽和缓存空间，以及可能没有想到的几件事。 ：-）