我真的需要 YUI3 加载器加载的所有文件吗？答案

【问题标题】：Do I really need all the files that the YUI3 loader loads?我真的需要 YUI3 加载器加载的所有文件吗？
【发布时间】：2012-02-16 05:23:02
【问题描述】：

我正在使用public release 2 中的Yahoo User Interface (YUI) 3.5。

我将yui-min.js 文件添加到我的视图中。我所做的只是为单击事件订阅一个按钮，将用户带到另一个视图。没什么特别的。

这是我的脚本参考和我在为单击事件订阅按钮时的脚本：

<script src="/Assets/yui_3.5.0pr2/yui/build/yui/yui-min.js"></script>

<script>

     YUI().use('node', 'event', function (Y) {
          Y.one('#cancel').on('click', function (e) {
               window.location = '/Administration/User';
          });
     });

</script>

但是当页面加载时，它会让39 requests 加载所有的 css 文件和其他 YUI3 所需的文件。我可以将所有 5 个 css 文件放入 1 个中，但这仍然是 35 个请求。并且总下载大小约为176kb。

cssreset-min.css
cssfonts-min.css
cssgrids-min.css
cssbase-min.css
admin.css
yui-min.js
oop-min.js
event-custom-base-min.js
dom-core-min.js
dom-base-min.js
selector-native-min.js
selector-min.js
node-core-min.js
node-base-min.js
event-base-min.js
event-delegate-min.js
node-event-delegate-min.js
pluginhost-base-min.js
pluginhost-config-min.js
node-pluginhost-min.js
dom-style-min.js
dom-screen-min.js
node-screen-min.js
node-style-min.js
event-custom-complex-min.js
event-synthetic-min.js
event-mousewheel-min.js
event-mouseenter-min.js
event-key-min.js
event-focus-min.js
event-resize-min.js
event-hover-min.js
event-outside.js
event-touch-min.js
event-move-min.js
event-flick-min.js
event-valuechange-min.js
intl-min.js

这对我来说没有意义。为什么所有这些文件都加载了，而我没有使用所有这些文件，还是我使用它们？这样做有什么好处？就我所做的事情而言，是否所有这些 javascript 文件都被使用了，或者 YUI 加载器是否加载了未使用的额外文件？

【问题讨论】：

标签： javascript asp.net-mvc-3 yui yahoo

【解决方案1】：

在这种特殊情况下，只是为了满足您的需要，稍作调整会有所帮助。首先，您可能不需要加载 CSS 文件。在这种情况下，只需使用 fetchCSS 配置选项。那么您可能不需要所有的 Node 和 Event 模块来订阅一个简单的事件。只需node-base 可能就足够了。所以你可以试试这个：

YUI({ fetchCSS: false }).use('node-base', function (Y) {
  Y.one(button).on('click', fn);
});

使用 Gzip 可以将其缩减为 11 个文件和 18kb。

但总的来说，几乎每个文件都需要。有这么多文件的原因是 YUI 团队改变了他们的构建过程并采用了更精细的方法。这样加载器就可以得到它需要的东西，避免加载很多不必要的代码。缺点是如果您自己托管它并且不使用系统来组合文件，下载速度会很慢。

我建议查看 Ryan 的 NodeJS 组合处理程序：https://github.com/rgrove/combohandler。其他服务器端平台还有其他类似的项目。

【讨论】：