Open Closed

Minification Ignored Files Not working #4466


User avatar
0
rafael.gonzales created
  • ABP Framework version: v7.0.1
  • UI type: MVC
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): No

Hi,

I wanted to add CSS and JS at the last of the tag but i want to exclude some of them from the minification.

What i did.

Created a ScriptContributor AND StyleContributer in DemoMinification.Web\Bundling

DemoScriptContributor.cs

[DependsOn(typeof(JQueryScriptContributor))]
public class DemoScriptContributor : BundleContributor
{
    public const string DemoScript= "/demo/js/init.js";
    public override void ConfigureBundle(BundleConfigurationContext context)
    {
        context.Files.AddIfNotContains(DemoScript);
    }
}


    public override void ConfigureBundle(BundleConfigurationContext context)
    {
        context.Files.AddIfNotContains(DemoScript);
    }
}

**DemoStyleContributor.cs **

    public class DemoStyleContributor : BundleContributor
    {
        public const string DemoStyle = "/demo/css/init.css";
        public override void ConfigureBundle(BundleConfigurationContext context)
        {
            context.Files.AddIfNotContains(DemoStyle);
        }
    }

Created a ViewComponent and a Default.cshtml in DemoMinification.Web\Components\DemoJS

**DemoJsViewComponent **

   public class DemoJsViewComponent : AbpViewComponent
    {
        public IViewComponentResult Invoke()
        {
            return View("/Components/DemoJs/Default.cshtml");
        }
    }

Default.cshtml

@using DemoMinification.Web.Bundling
@*@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bundling*@

<abp-script type="typeof(DemoScriptContributor)" />

In DemoMinificationWebModule.cs, i added this method to add the CSS Bundle and to add a Hook for the ViewComponent which include the desired JS in the position we want and Populate the MinificationIgnoredFiles List to include those files i want to keep the same (not minified)

The problem is everything is minified and the IgnoredFiles added to the list are not IGNORED from the minification.

What can i do?

I attached a demo solution with the problem.

DemoMinificationWebModule.cs

private void ConfigureDemoBundle()
{
    Configure&lt;AbpBundlingOptions&gt;(options =>
    {
        options
            .StyleBundles
            .Get(StandardBundles.Styles.Global)
            .AddContributors(typeof(DemoStyleContributor));
    });

    Configure&lt;AbpLayoutHookOptions&gt;(options =>
    {
        options.Add(
            LayoutHooks.Head.Last,
            typeof(DemoJsViewComponent)
        );
    });

    Configure&lt;AbpBundlingOptions&gt;(options =>
    {
        options.MinificationIgnoredFiles.Add("/demo/css/init.css");
        options.MinificationIgnoredFiles.Add("/demo/js/init.js");
        options.Mode = BundlingMode.BundleAndMinify;
    });

}

3 Answer(s)
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    You can check and share your logs.

    It works for me, it will not be minified, but it will still be added to the same bundle file.

  • User Avatar
    0
    rafael.gonzales created

    How can avoid that behavior? I want all the ignored files exist as a single <link rel="stylesheet"> and not be included in the bundled minificated version.

    How is the bootstrap-light and bootstrap-dark (included in LeptonX Pro) excluded from minification and bundling? how can i approach something like this?

    Also how can i change my own css from dark and light and being changed in the source code also as bootstrap-dark and bootstrap-light?

    Thank you so much!

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    How can avoid that behavior? I want all the ignored files exist as a single <link rel="stylesheet"> and not be included in the bundled minificated version.

    It's Bundling & Minification system design, you can't avoid it. you should use link tag add them to the page instead of using a bundle.

    How is the bootstrap-light and bootstrap-dark (included in LeptonX Pro) excluded from minification and bundling? how can i approach something like this?

    You can remove them from bundling, and use HTML tag to add them to page.

    Also how can i change my own css from dark and light and being changed in the source code also as bootstrap-dark and bootstrap-light?

    You can check the style-initializer.js file. The file path is /Themes/LeptonX/Global/scripts/style-initializer.js.

    For more information, see : https://docs.abp.io/en/abp/latest/UI/AspNetCore/Bundling-Minification

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11