我们应该在 WordPress 项目中使用预捆绑的 javascript 文件吗？

Question

最近我尝试在我的 WordPress 项目中使用像 requirejs/browserify/webpack 这样的模块系统，主要目的是捆绑资产（javascript、css 文件等）。

但是有一个问题让我很困惑：我们应该在 WordPress 主题/插件项目中使用预捆绑的 javascript 文件吗？

预捆绑脚本的优点是减少请求并提高性能，那么为什么这是一个问题呢？

因为通常一个WordPress网站不只是使用一个主题，而是使用许多插件。如果 WordPress 模块（主题/插件）使用预先捆绑的脚本，则可能会导致相同的脚本被不同的模块加载，并且用户无法选择将其出队。

例如：

预捆绑

我的主题

A

使用预捆绑的脚本文件

bundle.js

其中包括lodash、backbone、jquery、carousel插件、bootstrap...，用户在他们的网站上使用了我的主题，并激活了许多插件，一些插件已排队backbone、bootstrap 或其他相同的插件。即使我们可以解决冲突问题，网站也会多次加载相同的库/插件，从而导致页面不必要的额外加载时间。

后捆绑

如果我们使用WordPress方式

wp_enqueue_script()

和

wp_enqueue_style()

分别加载脚本并实现资产依赖。当不同模块中使用相同的脚本时，用户可以使用

wp_dequeue_script()

将脚本出队，并且用户可以使用一些 minfiy/merge 插件来合并所有脚本，我称之为 post-bundle。

那么，再问一次，我们应该在 WordPress 项目中使用预捆绑的 javascript 文件吗？或者您对在 WordPress 项目中组织脚本的最佳方式有什么建议吗？

Answer 1

是的，这当然是你应该做的事情。我对 WordPress 没有太多经验，因此不太清楚如何实现这一点，因为脚本列表是针对每个请求动态评估的。

我认为，可能的一件事是为一组特定的脚本创建一个静态包，例如

foo.js

、

bar.js

和

quux.js

，然后按照以下方式执行操作：

• 在 HTML 输出中呈现所有脚本之前对其进行评估
• 对于每个脚本，检查它是否是捆绑包的一部分
• 如果是这样，则使脚本出队，将包标记为包含
• 最后，将所有应包含的包放入队列

显然，这需要大量的工具并在 PHP 和 JS 之间共享数据，并且这不是您可以轻松放入 WP 实例的东西，因为您可能必须进行一些手动更改，例如，每次列表插件更改。不过，由于您可以完全控制捆绑包，因此您肯定可以实现比大多数 WP 所有者所接受的简单“获取 HTML 响应、提取脚本、连接和缩小、转换响应”方法更大的优化。

Answer 2

你可以看一下玩家选择吗

看看为什么捆绑不起作用？