ASP.NET 4.5 viene con una característica muy buena llamada bundles y minificados. Son dos técnicas que permiten unificar nuestros archivos en uno solo y reducir su peso renombrando variables y quitando comentarios y espacios en blanco innecesarios.
El primer paso es crear los bundles. Para esto debemos buscar el archivo App_Start\BundleConfig.cs. En la función RegisterBundles, debemos realizar la configuración:
|
1 2 3 4 5 |
public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js")); } |
La función Include permite especificar todos los archivos que incluye el bundle. Simplemente se ingresan todos separados por coma.
El wildcard {version} permite que podamos actualizar el número de versión y ASP.NET va a tomar siempre el más grande si necesidad de cambiar el código.
También se puede hacer con CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include( "~/Content/themes/base/jquery.ui.core.css", "~/Content/themes/base/jquery.ui.resizable.css", "~/Content/themes/base/jquery.ui.selectable.css", "~/Content/themes/base/jquery.ui.accordion.css", "~/Content/themes/base/jquery.ui.autocomplete.css", "~/Content/themes/base/jquery.ui.button.css", "~/Content/themes/base/jquery.ui.dialog.css", "~/Content/themes/base/jquery.ui.slider.css", "~/Content/themes/base/jquery.ui.tabs.css", "~/Content/themes/base/jquery.ui.datepicker.css", "~/Content/themes/base/jquery-ui-timepicker-addon.css", "~/Content/themes/base/jquery.ui.progressbar.css", "~/Content/themes/base/jquery.ui.theme.css")); |
Para mostrar los bundles en nuestras vistas:
|
1 |
@Scripts.Render("~/bundles/jquery") |
Para activar el bundling y la minificación no hay que olvidarse de cambiar la siguiente propiedad en el web.config:
|
1 2 3 |
<system.web> <compilation debug="false" /> </system.web> |
Si no cambiamos debug a false, nuestro HTML se generará con toda la lista de referencias a los archivos que incluyen nuestros bundles. Por ejemplo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<script src="/AppScripts/frontend/app-storeadmin.js"></script> <script src="/AppScripts/frontend/aboutViewModel.js"></script> <script src="/AppScripts/frontend/dashboardViewModel.js"></script> <script src="/AppScripts/frontend/store/storeModel-1.0.2.js"></script> <script src="/AppScripts/frontend/store/storeAddViewModel.validation.js"></script> <script src="/AppScripts/frontend/store/storeAddViewModel-1.0.1.js"></script> <script src="/AppScripts/frontend/site/wicAuthRelationModel-1.0.2.js"></script> <script src="/AppScripts/frontend/site/wicAuthRelationAddViewModel.validation-1.0.1.js"></script> <script src="/AppScripts/frontend/site/wicAuthRelationAddViewModel.js"></script> <script src="/appscripts/frontend/terminal/terminalModel-1.0.2.js"></script> <script src="/appscripts/frontend/terminal/terminaladdviewmodel.validation.js"></script> <script src="/appscripts/frontend/terminal/terminaladdviewmodel.js"></script> <script src="/appscripts/frontend/terminal/terminallistviewmodel.js"></script> <script src="/appscripts/frontend/terminal/terminalmsgsmodel.js"></script> <script src="/appscripts/frontend/terminal/terminalMsgsListViewModel-1.0.1.js"></script> <script src="/AppScripts/frontend/department/departmentModel.js"></script> <script src="/AppScripts/frontend/department/departmentAddViewModel.validation.js"></script> <script src="/AppScripts/frontend/department/departmentAddViewModel-1.0.2.js"></script> <script src="/AppScripts/frontend/department/departmentListViewModel.js"></script> <script src="/AppScripts/frontend/site/siteModel-1.0.2.js"></script> <script src="/AppScripts/frontend/site/siteDetailViewModel.js"></script> <script src="/AppScripts/frontend/site/siteListViewModel.js"></script> <script src="/AppScripts/frontend/site/siteAddViewModel.validation-1.0.1.js"></script> <script src="/AppScripts/frontend/site/siteAddViewModel-1.0.3.js"></script> <script src="/AppScripts/frontend/cashier/cashierModel.js"></script> <script src="/AppScripts/frontend/cashier/cashierListViewModel-1.0.1.js"></script> <script src="/AppScripts/frontend/cashier/cashierAddViewModel.validation-1.0.1.js"></script> <script src="/AppScripts/frontend/cashier/cashierAddViewModel-1.0.2.js"></script> <script src="/AppScripts/frontend/pricelist/priceListModel.js"></script> <script src="/AppScripts/frontend/pricelist/priceListListViewModel-1.0.1.js"></script> <script src="/AppScripts/frontend/pricelist/priceListAddViewModel.validation.js"></script> <script src="/AppScripts/frontend/pricelist/priceListAddViewModel-1.0.1.js"></script> <script src="/AppScripts/frontend/pricelist/priceListItemAddViewModel-1.0.1.js"></script> <script src="/AppScripts/frontend/pricelist/priceListImportVideModel.js"></script> <script src="/AppScripts/frontend/item/itemModel-1.0.2.js"></script> <script src="/AppScripts/frontend/item/itemListViewModel-1.0.1.js"></script> <script src="/AppScripts/frontend/item/itemAddViewModel.validation.js"></script> <script src="/AppScripts/frontend/item/itemAddViewModel-1.0.6.js"></script> <script src="/AppScripts/frontend/item/itemExportImportViewModel.validation.js"></script> <script src="/AppScripts/frontend/item/itemExportImportViewModel-1.0.1.js"></script> |
En cambio, con debug en false, se genera un único archivo (un bundle), minificado y además, se agrega un parámetro aleatorio para evitar que el browser cachee los archivos.
|
1 |
<script src="/bundles/main-storeadmin?v=sXhuU1yZePxixvEY1FHkvRDuTFjvYzIPCmgp2yKlTpw1"></script> |
Adicionalmente, si debug está en false, ASP.NET va a buscar la versión .min de los archivos, si es que ya existe.
Para mayor información, recomiendo este artículo: https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification