检查文件是否已在Webpack中下载/需要？

Question

我在一家拥有自定义requireIfLoaded实施的公司工作.该实现允许您仅在已下载模块时才需要该模块.如果代码路径依赖于模块,但并不总是命中代码路径,则并不总是需要该模块.这大大减少了我们的文件大小.

以下是它如何有用的示例:

if (page === PROFILE) {
  // ProfileHelper should already be downloaded if we're on the profile page.
  const ProfileHelper = requireIfLoaded('ProfileHelper');
  ProfileHelper.doSomething();
} else if (page === FEED) {
  // FeedHelper should already be downloaded if we're on the feed page.
  const FeedHelper = requireIfLoaded('FeedHelper');
  FeedHelper.doSomething();
}

requireIfLoaded未在Feed页面上加载,require('ProfileHelper')也未加载到个人资料页面上.Webpack有这样的东西吗？

这里有一个潜在的解决方案:https://github.com/webpack/webpack/issues/526

然而,这是从2年前开始的,代码看起来很糟糕.有没有更好的办法？如果这仍然是最好的方式,请通过答案告诉我,我会将其标记为正确的答案.

编辑以澄清:

如果我同时需要ProfileHelper和require('FeedHelper')所有的时间,则一个模块会使用.在任何给定页面上最多下载其中一个.

这与重复数据删除无关.

编辑

该公司为不同的页面生成许多不同的包,但这些包共享许多文件.这些文件根据它们所在的页面而表现不同.通常,并非文件引用的所有模块都将用于给定页面.在这种情况下,这些文件不是捆绑的.

Answer 1

Webpack 会多次对所需的所有模块进行重复数据删除，并且已经加载的模块不会再次初始化（遵循 CommonJS 规范）。所以，基本上，只需直接要求所有依赖项即可！

更重要的是：如果你使用 webpack，不要包装你的需求。确定您实际使用的模块的静态分析将停止准确工作，并且 webpack 会捆绑太多。