首页 > 解决方案 > 如何在 .net core mvc 视图中缩小?

问题描述

在我用 .net core mvc 制作的网站上。当我们打开站点,点击页面源码视图时,我们怎么做第二张图所示的长代码,以minify的形式?

在此处输入图像描述

在此处输入图像描述

标签: .netasp.net-coreasp.net-core-mvcminifybundling-and-minification

解决方案


将 Web Markup Min 添加到 ASP.NET Core 应用程序

WebMarkupMin是一个非常成熟的缩小器,不仅适用于 HTML,还适用于 XML 和 XHTML,以及嵌入在 HTML 中的脚本和样式标签。它们提供了多个 NuGet 包,用于连接您的 ASP.NET 应用程序,适用于使用 MVC、HttpModules、WebForms 和 ASP.NET Core 的 ASP.NET 4.x。

步骤 1. 安装包 WebMarkupMin.AspNetCoreX

我的项目是 ASP.NET Core 5,所以我选择安装WebMarkupMin.AspNetCore5.

在此处输入图像描述

步骤 2. 在您的应用程序Startup.Configure方法中注册

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        ...
        app.UseStaticFiles();

        app.UseWebMarkupMin();

        app.UseRouting();
        ...
    }

步骤 3. 向 IoC 容器注册服务

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddControllersWithViews();

        services.AddWebMarkupMin(
            options =>
            {
                options.AllowMinificationInDevelopmentEnvironment = true;
                options.AllowCompressionInDevelopmentEnvironment = true;
            })
            .AddHtmlMinification(
                options =>
                {
                    options.MinificationSettings.RemoveRedundantAttributes = true;
                    options.MinificationSettings.RemoveHttpProtocolFromAttributes = true;
                    options.MinificationSettings.RemoveHttpsProtocolFromAttributes = true;
                })
            .AddHttpCompression();
    }

测试结果

前:

在此处输入图像描述

后:

在此处输入图像描述



配置捆绑和缩小

MVC 和 Razor Pages 项目模板提供了一个由 JSON 配置文件组成的捆绑和缩小解决方案。当您的开发工作流程需要进行捆绑和缩小之外的处理(例如 linting 和图像优化)时,第三方工具非常适合。通过使用设计时捆绑和缩小,缩小文件是在应用程序部署之前创建的。在部署之前捆绑和缩小提供了减少服务器负载的优势。您可以在此处查看官方文档的详细信息。


推荐阅读