ASP.NET MVC Bundler vs webpack Bundling

Question

Currently working in ASP.NET MVC application, after exploring angular, i was little excited to use webpack for Bundling and Minification in my ASP.NET MVC app.

Followed all the steps from webpack guides, i was able to bundle and minify the js files.

But when i refer the bundle in my app, it is taking more time than ASP.NET bundles.

Below is the ASP.NET bundle code

 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"
          ));

Referring like below in cshtml file

@{
    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>

Below is the request timings.

Asp.net bundled scripts are just taking 411 ms and webpack bundled file is taking 2.87s

Not able to understand why static file is taking more time.

How to optimize this ? Did i miss anything ?

Thanks, Badrinarayana

One thing that comes to mind is whether or not Webpack is compiling the same list of files that your MVC bundler is compiling? AFAIK, I think MVC compiles the files in memory, so the overall download time will be quicker than Webpack, because the download in that is done from the server's disk, not from memory, so different bandwidths are in play as well. — ChrisC
Yes webpack is compiling the same list of files. Do i need to check anything else apart from this ? — Badrinarayana
If the files are the same then the only thing I can think of as I said is the differences in how/when compilation and bundling is done. For MVC, the bundling is done in memory and the resulting bundle is simply included as part of the response. Webpack though has to compile the files into a single bundled file to disk and also download that file from disk. Downloading directly from memory versus hard disk is always going to carry a big difference in performance due to memory being so much faster, even when compared to SSD. — ChrisC
My intention and curiosity to move to webpack was to improve the 400ms further down to 100ms to 150ms, I was thinking pre compiling and minifying will reduce the server load further and download will be faster. Now from your point I understood downloading from memory is faster than from disk. And also I was not finding any articles how ASP.NET bundler is working. So now I think I can revert back to ASP.NET bundler itself to get the performance. If you know any article on ASP.NET bundler please share it, will be useful for me. — Badrinarayana
Sorry to add more confusion to what you're doing, but you should also consider adding more loaders to Webpack that can help in reducing the load times. I recommend trying things like code minification and uglification. As for MVC, I just had a quick look and found this. For Webpack, I followed the Webpack tutorial on the Angular.io site. Along with that and quite a lot more Googling to figure out the more intricate parts of Webpack, but I think that's worth another question in its entirety — ChrisC

Neeraj Kumar Neeraj Kumar · Accepted Answer · 2020-02-28T21:39:33

Try this out - Before build step (in .csproj), Add web pack generated bundle files to the dist folder. Use Asp.Net bundler to get the web pack bundled scripts from the dist folder and you can finally import Asp.net bundled script in your html/.aspx page

ASP.NET MVC Bundler vs webpack Bundling

1 Answers