如何使用BundleTransformer.Closure移除未使用JS/CSS代码并集成.NET MVC？

前置准备 #

• 通过NuGet安装依赖包：BundleTransformer.Closure、BundleTransformer.Core、Microsoft.AspNet.Web.Optimization，需要处理CSS的场景额外安装BundleTransformer.Closure.Minifiers的CSS相关适配包
• 确认项目已启用ASP.NET Web Optimization的Bundle基础功能

基础集成配置 #

第一步：修改Web.config配置 #

在configuration/configSections节点下添加配置声明：

<sectionGroup name="bundleTransformer">
  <section name="core" type="BundleTransformer.Configuration.CoreSettings, BundleTransformer.Core" />
  <section name="closure" type="BundleTransformer.Closure.Configuration.ClosureSettings, BundleTransformer.Closure" />
</sectionGroup>

添加bundleTransformer全局配置节点，同时开启死代码清理能力：

<bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd">
  <core>
    <js defaultMinifier="ClosureJsMinifier">
      <minifiers>
        <add name="ClosureJsMinifier" type="BundleTransformer.Closure.Minifiers.ClosureJsMinifier, BundleTransformer.Closure" />
      </minifiers>
    </js>
    <css defaultMinifier="ClosureCssMinifier">
      <minifiers>
        <add name="ClosureCssMinifier" type="BundleTransformer.Closure.Minifiers.ClosureCssMinifier, BundleTransformer.Closure" />
      </minifiers>
    </css>
  </core>
  <closure>
    <!-- 仅Advanced编译级别支持JS未使用代码清理 -->
    <js compilationLevel="Advanced" 
          removeUnusedCode="true"
          prettyPrint="false" />
    <!-- 开启CSS未使用声明清理 -->
    <css removeUnusedDeclarations="true" 
          prettyPrint="false" />
  </closure>
</bundleTransformer>

注意：如果使用JS的Advanced编译模式，需要确保业务代码符合Closure Compiler编码规范，避免变量名误压缩导致功能异常。

第二步：配置Bundle注册规则 #

在App_Start/BundleConfig.cs中修改Bundle注册逻辑：

using BundleTransformer.Core.Bundles;
using BundleTransformer.Core.Orderers;

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.UseCdn = false;
        var nullOrderer = new NullOrderer();
        
        // JS Bundle注册示例
        var mainJsBundle = new CustomScriptBundle("~/bundles/js/main");
        mainJsBundle.Include(
            "~/Scripts/common.js",
            "~/Scripts/site.js"
        );
        mainJsBundle.Orderer = nullOrderer;
        bundles.Add(mainJsBundle);
        
        // CSS Bundle注册示例
        var mainCssBundle = new CustomStyleBundle("~/bundles/css/main");
        mainCssBundle.Include(
            "~/Content/reset.css",
            "~/Content/site.css"
        );
        mainCssBundle.Orderer = nullOrderer;
        bundles.Add(mainCssBundle);
        
        // 发布环境启用压缩，开发环境可关闭方便调试
        #if !DEBUG
            BundleTable.EnableOptimizations = true;
        #endif
    }
}

第三步：全局注册配置 #

在Global.asax.cs的Application_Start方法中添加Bundle配置调用：

BundleConfig.RegisterBundles(BundleTable.Bundles);

死代码清理注意事项 #

• JS死代码清理：Closure Compiler会自动删除无引用的函数、变量，如果你有全局暴露给外部调用的方法，需要通过@export标注或者在externs配置中声明，避免被误删。
• CSS死代码清理：开启未使用声明清理后，编译器会自动删除Bundle内没有被HTML引用的选择器，如果有动态生成DOM用到的CSS类，需要添加到Closure CSS配置的保留白名单中。
• 第三方JS库如果不支持Advanced编译模式，建议单独打包，或者将对应API添加到externs配置中，避免压缩后功能异常。
• 调试阶段建议先将JS编译级别设为Simple，确认功能正常后再切换到Advanced开启死代码清理，降低问题排查成本。

内容的提问来源于stack exchange，提问作者Sagar