Question

我有关于捆绑的问题。想想这样的情况。以jquery DataTables为例。它有很少的插件，您可以在需要时使用它们。在某些页面中，只使用基本脚本文件即可完成工作。但在另一个页面中，我可能需要使用Fixed Header插件，在另一个页面中我可能需要使用Fixed Header插件以及Table Tools插件。

在捆绑中处理这类情况的最佳方法是什么？我应该只创建一个包含所有脚本文件的包（甚至是我可能不会在某些页面中使用但在其他页面中使用的包）或者专门为每个页面创建包或者是否有更好的方法来执行此操作。我希望能够做一些像

这样的事情

Scripts.Render("~/bundles/datatables", "FixedHeader", "TableTools") 这将包括相关文件并缩小它们。

任何帮助都非常感激。

谢谢， Amila

Answer 1

部分原因是，没有人可以为您解答。捆绑始终是一种权衡：您以减少必须下载的较大文件为代价来减少请求。您个人必须权衡初始请求中这些脚本添加的额外权重与以后请求它们所需的时间。

作为一般准则，这主要是关于您的受众。您是否期望拥有大量移动用户？至少在美国，移动数据价格昂贵且相当有限（由于成本过高，人们试图选择最低的数据层）。强制您的移动用户下载包含可能永远不会运行的代码的大型JS文件，这会浪费他们的数据。然而，如果您的目标是桌面用户，那么大文件没有问题，实际上是可取的，因为通常不会担心数据使用情况，并且其他页面的页面加载时间也会得到改善。但是，即使使用移动设备，有时用户更喜欢更快的页面加载而不是更少的数据使用，因此即使这样也必须进行判断。

也就是说，如果您不选择从一开始就将它们全部捆绑在一起，那么可以实际创建捆绑包。

@{ BundleTable.Bundles.Add(new ScriptBundle("~/bundles/onthefly").Include("~/Path/To/Some/Script.js")); }

然后，像往常一样：

@Scripts.Render("~/bundles/onthefly")

Answer 2

请查看Enfold project。它可能能够满足你的需求。

假设您在Web项目中有以下视图：

〜/查看/主页/ About.cshtml
  〜/浏览/首页/ Contact.cshtml
  〜/查看/主页/ Index.cshtml

您可以这样组织您的Javascript文件：

〜/脚本/查看/ default.js
  〜/脚本/浏览/首页/ default.js
  〜/脚本/浏览/首页/ about.js
  〜/脚本/浏览/首页/ contact.js
  〜/ Scripts / Views / Home / index.js

通过这样的设置，将创建以下包：

〜/ bundles / home / about


〜/脚本/视图/ default.js
    〜/脚本/视图/家庭/ default.js
    〜/ scripts / views / home / about.js


〜/ bundles / home / contact


〜/脚本/视图/ default.js
    〜/脚本/视图/家庭/ default.js
    〜/ scripts / views / home / contact.js


〜/ bundles / home / index


〜/脚本/视图/ default.js
    〜/脚本/视图/家庭/ default.js
    〜/ scripts / views / home / index.js

动态捆绑和缩小

2 个答案: