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

Answer 1

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