Step 1: Install Bundling and Minification (via the GUI). Tools > Library Package Manager > Manage NuGet Packages For Solution
. Search Online for "bundling" and the first result should be Microsoft ASP.NET Web Optimization Framework
. Install that.
Step 2: Right-click your Web Project and Add New Folder and call it App_Start
.
Step 3: Add a new class in App_Start
called BundleConfig.cs
. It could look like this:
using System.Web.Optimization;
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
}
}
Step 4: Load on ApplicationStart in global.asax:
void Application_Start(object sender, EventArgs e)
{
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
Step 5: Add to footer of MasterPage. I usually do like this:
<%: System.Web.Optimization.Scripts.Render("~/bundles/jquery") %>
<asp:ContentPlaceHolder ID="MyScripts" runat="server"></asp:ContentPlaceHolder>
</body>
</html>
That way, jQuery loads near the </body>
tag and you can put all inline scripts in a ContentPlaceHolder
that renders after your main script references.