在cshtml文件asp.net核心中縮小javascript

Question

有沒有辦法縮小 .cshtml 文件中“@section Scripts”標簽中的 javascript？

Answer 1

Generally, the Asp.net core application using BuildBundlerMinifier package to bundle and minify static assets ( JavaScript, CSS, and images files ). 因此，要縮小@section Scripts標簽內的 JavaScript 腳本，您必須將腳本提取到外部腳本文件中，然后使用 BuildBundlerMinifier 來縮小 JS 文件。 有關使用 BuildBundlerMinifier 的更多詳細信息，請參閱Bundle and minify ASP.NET Core 中的 static 資產。

此外，您還可以嘗試使用一些開源的 package 來縮小內聯 JS。 如： WebMarkupMin 。

You could install this package via NuGet Package Manager (Based on your application version to select the package version):

然后，在 Startup.cs 文件中，添加app.UseWebMarkupMin(); 和services.AddWebMarkupMin(); 在 Configure 和 ConfigureServices 方法中，代碼如下：

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

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

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
            app.UseHsts();
        }

        app.UseHttpsRedirection();

        //Required using WebMarkupMin.AspNetCore5;
        app.UseWebMarkupMin();

        app.UseStaticFiles();

        app.UseRouting();
        app.UseAuthorization();
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapRazorPages();
        });
    }

之后 JavaScript 腳本已被縮小。 截圖如下：

前：

后：

Answer 2

有很多選擇，沒有更多細節很難回答哪個最適合你。

這些解決方案都不會解析 Razor 語法，或者無法自行在 cshtml 文件中的腳本 @section 塊中找到您的 JS 代碼。 如果您需要縮小該代碼，您應該將其拉入一個 JS 文件並使用<script src="..">引用它

選項

Visual Studio 工具：BundlerMinifier。 使用此工具，您可以捆綁和縮小 CSS 和 JS 文件。 作為一次性操作（右鍵單擊 -> 縮小文件），或者您可以創建一個 bundleconfig.json

鏈接： https://marketplace.visualstudio.com/items?itemName=MadsKristensen.BundlerMinifier

注意：此工具默認包含在 VS 2019 中，只需要通過 VS 2017 或更早版本的市場安裝

其他途徑通常涉及 NodeJ

• GruntJs（與 Visual Studio 有一些集成） - https://gruntjs.com/
• GulpJs - https://gulpjs.com/
• Webpack - https://webpack.js.org/