ASP.NET MVC 捆绑器与 webpack 捆绑答案

【问题标题】：ASP.NET MVC Bundler vs webpack BundlingASP.NET MVC 捆绑器与 webpack 捆绑
【发布时间】：2017-10-10 06:30:55
【问题描述】：

目前在 ASP.NET MVC 应用程序中工作，在探索了 Angular 之后，我对在我的 ASP.NET MVC 应用程序中使用 webpack 进行捆绑和缩小有点兴奋。

按照 webpack 指南中的所有步骤，我能够打包和缩小 js 文件。

但是当我在我的应用程序中引用包时，它比 ASP.NET 包花费的时间更多。

下面是 ASP.NET 包代码

 bundles.Add(new ScriptBundle("~/bundles/QuickReasonEntryScripts").Include(
                  "~/Scripts/jquery.min.js",
                  "~/Scripts/kendo.all.min.js",
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/ComonLibrary.js",
                  "~/Scripts/Common.js",
                  "~/Scripts/CommonFunctions.js",                      
                  "~/Scripts/QuickReason.Events.js",
                  "~/Scripts/QuickReason.Ajax.js"
          ));

在cshtml文件中引用如下

@{
    ViewBag.Title = "QuickReson";
    Layout = null;
}

@* Vendor scripts *@

<script>
    console.log('Page loaded : ' + Date());
</script>

@Styles.Render("~/bundles/QuickReasonEntryStyles")
@Scripts.Render("~/bundles/QuickReasonEntryScripts")

<script src="~/Scripts/bundle.js"></script>

<h2>QuickReson</h2>

以下是请求时间。

Asp.net 捆绑脚本仅需 411 毫秒，而 webpack 捆绑文件仅需 2.87 秒

无法理解为什么静态文件需要更多时间。

如何优化这个？我错过了什么吗？

谢谢，巴德里纳拉耶纳

【问题讨论】：

想到的一件事是 Webpack 是否正在编译与您的 MVC 捆绑器正在编译的文件列表相同的文件？ AFAIK，我认为 MVC 会在内存中编译文件，因此整体下载时间会比 Webpack 快，因为其中的下载是从服务器的磁盘完成的，而不是从内存中完成的，所以不同的带宽也在起作用。
是的，webpack 正在编译相同的文件列表。除了这个，我还需要检查什么吗？
如果文件相同，那么我唯一能想到的就是编译和捆绑的方式/时间的差异。对于 MVC，捆绑在内存中完成，生成的捆绑只是作为响应的一部分包含在内。 Webpack 虽然必须将文件编译成单个捆绑文件到磁盘，并从磁盘下载该文件。直接从内存下载与从硬盘下载总是会带来很大的性能差异，因为内存的速度要快得多，即使与 SSD 相比也是如此。
我迁移到 webpack 的意图和好奇心是将 400ms 进一步降低到 100ms 到 150ms，我在想预编译和缩小会进一步减少服务器负载并且下载会更快。现在从您的角度来看，我了解到从内存下载比从磁盘下载要快。而且我也没有找到任何文章 ASP.NET bundler 是如何工作的。所以现在我想我可以恢复到 ASP.NET 捆绑器本身来获得性能。如果您知道任何关于 ASP.NET bundler 的文章，请分享，对我有用。
很抱歉给你正在做的事情增加了更多的混乱，但你也应该考虑向 Webpack 添加更多的加载器，以帮助减少加载时间。我建议尝试诸如代码缩小和丑化之类的事情。至于MVC，我只是快速浏览了一下，发现this。对于 Webpack，我关注了 Angular.io 网站上的 Webpack tutorial。除此之外，还有更多的谷歌搜索来找出 Webpack 更复杂的部分，但我认为这值得另一个完整的问题

标签： asp.net-mvc webpack bundling-and-minification

【解决方案1】：

试试这个 - 在构建步骤之前（在 .csproj 中），将 web pack 生成的捆绑文件添加到 dist 文件夹。使用 Asp.Net bundler 从 dist 文件夹中获取 web pack 捆绑脚本，最终可以在 html/.aspx 页面中导入 Asp.net 捆绑脚本

【讨论】：