Popular blog tags

nopCommerce 4.x-Minifying Inline Css, Js and Html using WebMarkupMin in nopCommerce 4.x

Published

 

Step 1. Install package WebMarkupMin.AspNetCoreX
Step 2. Register in your application's Startup.Configure method
Step 3. Register services to the IoC container

 

Usually nopCommerce have only one CSS file in one certain directory. For example:

styles.css in \Themes\DefaultClean\Content,

facebookstyles.css in \Plugins\ExternalAuth.Facebook\Content,

nivo-slider.css in \Widgets.NivoSlider\Content\nivoslider.

 

step 1:Enable EnableCssBundling Setting

src\Presentation\Nop.Web\Areas\Admin\Controllers\SettingController.cs

public virtual IActionResult GeneralCommon()
        {
            if (!_permissionService.Authorize(StandardPermissionProvider.ManageSettings))
                return AccessDeniedView();

            //prepare model
            var model = _settingModelFactory.PrepareGeneralCommonSettingsModel();

            //notify admin that CSS bundling is not allowed in virtual directories
            if (model.MinificationSettings.EnableCssBundling && HttpContext.Request.PathBase.HasValue)
                _notificationService.WarningNotification(_localizationService.GetResource("Admin.Configuration.Settings.GeneralCommon.EnableCssBundling.Warning"));

            return View(model);
        }

 you can set

1.  Html for HtmlMinification,

2.js and css Bundling

3.ResponseCompression

 

src\Presentation\Nop.Web\Areas\Admin\Controllers\SettingController.cs

  //minification
            commonSettings.EnableHtmlMinification = model.MinificationSettings.EnableHtmlMinification;
            commonSettings.EnableJsBundling = model.MinificationSettings.EnableJsBundling;
            commonSettings.EnableCssBundling = model.MinificationSettings.EnableCssBundling;

step 2: Configure WebMarkupMin 

WebMarkupMin is a very mature minifier, not just for HTML but also XML and XHTML, as well as script and style tags embedded in your HTML. They provide multiple NuGet packages for hooking up your ASP.NET applications

src/Presentation/Nop.Web.Framework/Infrastructure/Extensions/ServiceCollectionExtensions.cs

using WebMarkupMin.AspNetCore3;
using WebMarkupMin.NUglify;

namespace Nop.Web.Framework.Infrastructure.Extensions
{
    /// <summary>
    /// Represents extensions of IServiceCollection
    /// </summary>
    public static class ServiceCollectionExtensions
    {
 /// <summary>
        /// Add and configure WebMarkupMin service
        /// </summary>
        /// <param name="services">Collection of service descriptors</param>
        public static void AddNopWebMarkupMin(this IServiceCollection services)
        {
            //check whether database is installed
            if (!DataSettingsManager.DatabaseIsInstalled)
                return;

            services
                .AddWebMarkupMin(options =>
                {
                    options.AllowMinificationInDevelopmentEnvironment = true;
                    options.AllowCompressionInDevelopmentEnvironment = true;
                    options.DisableMinification = !EngineContext.Current.Resolve<CommonSettings>().EnableHtmlMinification;
                    options.DisableCompression = true;
                    options.DisablePoweredByHttpHeaders = true;
                })
                .AddHtmlMinification(options =>
                {
                    options.CssMinifierFactory = new NUglifyCssMinifierFactory();
                    options.JsMinifierFactory = new NUglifyJsMinifierFactory();
                })
                .AddXmlMinification(options =>
                {
                    var settings = options.MinificationSettings;
                    settings.RenderEmptyTagsWithSpace = true;
                    settings.CollapseTagsWithoutContent = true;
                });
        }
 }
}

step 3: Rgister Service-WebMarkupMin 

The HTMl minifier is implemented as a standard ASP.NET Core middleware, so you register it in your application's Startup.Configure method as usual:

src\Presentation\Nop.Web.Framework\Infrastructure\NopMvcStartup.cs

   public void ConfigureServices(IServiceCollection services, IConfiguration configuration)
        {
        

            //add WebMarkupMin services to the services container
            services.AddNopWebMarkupMin();

          
        }

Step 4:  use WebMarkupMin

src/Presentation/Nop.Web.Framework/Infrastructure/Extensions/ApplicationBuilderExtensions.cs

 /// <summary>
        /// Configure WebMarkupMin
        /// </summary>
        /// <param name="application">Builder for configuring an application's request pipeline</param>
        public static void UseNopWebMarkupMin(this IApplicationBuilder application)
        {
            //check whether database is installed
            if (!DataSettingsManager.DatabaseIsInstalled)
                return;

            application.UseWebMarkupMin();
        }