Search code examples
asp.net-mvcbundle

do I need to add all of the javascript and css links in bundleconfig asp.net mvc?

In my project, I have a lot of javascript link and css link I don't know, can I add all of those in bundle-config? of course, this is for admin Area and also I have a user Area.

this is admin Area

<script src="~/Areas/admin/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/js.cookie.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="~/Areas/admin/assets/global/plugins/moment.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/morris/morris.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/morris/raphael-min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/counterup/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/counterup/jquery.counterup.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/amcharts/amcharts/amcharts.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/amcharts/amcharts/serial.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/amcharts/amcharts/pie.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/amcharts/amcharts/radar.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/amcharts/amcharts/themes/light.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/amcharts/amcharts/themes/patterns.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/amcharts/amcharts/themes/chalk.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/amcharts/ammap/ammap.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/amcharts/ammap/maps/js/worldLow.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/amcharts/amstockcharts/amstock.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/horizontal-timeline/horizontal-timeline.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/flot/jquery.flot.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/flot/jquery.flot.resize.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/flot/jquery.flot.categories.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/jquery-easypiechart/jquery.easypiechart.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/jquery.sparkline.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/global/plugins/jqvmap/jqvmap/jquery.vmap.js" type="text/javascript"></script>

<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN THEME GLOBAL SCRIPTS -->
<script src="~/Areas/admin/assets/global/scripts/app.min.js" type="text/javascript"></script>
<!-- END THEME GLOBAL SCRIPTS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="~/Areas/admin/assets/pages/scripts/dashboard.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<!-- BEGIN THEME LAYOUT SCRIPTS -->
<script src="~/Areas/admin/assets/layouts/layout2/scripts/layout.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
<script src="~/Areas/admin/assets/layouts/global/scripts/quick-nav.min.js" type="text/javascript"></script>
Solution

  • Yes, you can add as many files to your bundles as you like, and it benefits you to do so as it reduces the number of requests the browser has to make to load your page.

    For example:

    bundles.Add(new ScriptBundle("~/bundles/adminScripts").Include(
          "~/Areas/admin/assets/global/plugins/jquery.min.js",
          "~/Areas/admin/assets/global/plugins/bootstrap/js/bootstrap.min.js",
          "~/Areas/admin/assets/global/plugins/js.cookie.min.js"))

    Then on your page:

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