【バンドルや最小化の機能変更】従来のBundleConfig.csの内容をWebOptimizer（最新の最小化ツール）の設定に移行する


:::note warn
WebOptimizer は主に ASP.NET Core 用に設計されたライブラリであり、.NET Framework 4.8.1（ASP.NET MVC 5など）では基本的にそのままでは使えません。
:::


## **🔴 `System.Web.Optimization` は古い技術**
`System.Web.Optimization` は **.NET Framework 向けの古いクラス** であり、現在では **推奨されていません**。  

### **起きた事象（bootstrap.min.css）**
※そもそも圧縮されたminものだけど、このようなエラーがまた出てしまうと気持ち悪いだよねー
![SoExcited~GIF.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509696/183a7b15-c327-47a6-a07e-1b278eada19a.gif)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509696/e364fa6a-43f2-4b0b-8cf1-7225f5f7e506.png)


## **🎶 `従来のBundleConfig.csの内容をWebOptimizer（最新の最小化ツール）の設定に移行する**
`WebOptimizer`を導入すると、`BundleConfig.cs`のような従来の`ASP.NET MVC`のバンドル管理方式は使用しなくなります。`WebOptimizer`が提供するバンドルや最小化の機能を使う場合、`BundleConfig.cs`は不要になります。

### 既存の`BundleConfig.cs`の内容について
`BundleConfig.cs`で行っていたバンドル設定（例えば、`StyleBundle`や`ScriptBundle`の定義）は、`WebOptimizer`を使う場合、`WebOptimizer`に置き換えられることになります。`WebOptimizer`では、`ScriptBundle`や`StyleBundle`を代わりに設定し、最適化を行います。

### `WebOptimizer`と従来の`BundleConfig`との違い

1. **`BundleConfig.cs`での設定**:
   - 旧来の`ASP.NET MVC`では、`BundleConfig.cs`でバンドルや最小化の設定を行っていました。
   - 例えば、次のように設定します。

   ```csharp
   public class BundleConfig
   {
       public static void RegisterBundles(BundleCollection bundles)
       {
           bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                       "~/Scripts/jquery-{version}.js"));
           bundles.Add(new StyleBundle("~/Content/css").Include(
                       "~/Content/bootstrap.css"));
       }
   }
   ```

   そして、ビューで次のように参照します。

   ```html
   @Scripts.Render("~/bundles/jquery")
   @Styles.Render("~/Content/css")
   ```

2. **`WebOptimizer`での設定**:
   - `WebOptimizer`では、上記のような手動で`ScriptBundle`や`StyleBundle`を定義する必要がなく、代わりに`WebOptimizer`のAPIでバンドル設定を行います。
   - 例えば、次のように設定します。

   ```csharp
   public class MvcApplication : System.Web.HttpApplication
   {
       protected void Application_Start()
       {
           var options = new WebOptimizerOptions();

           // WebOptimizerを使ってバンドルと最小化
           BundleTable.Bundles.Add(new ScriptBundle("~/bundles/js").Include(
               "~/Scripts/jquery-{version}.js",
               "~/Scripts/bootstrap.js"
           ).WithOptions(options));

           BundleTable.Bundles.Add(new StyleBundle("~/bundles/css").Include(
               "~/Content/bootstrap.css"
           ).WithOptions(options));

           // 他の設定（ルート設定など）
           AreaRegistration.RegisterAllAreas();
           RouteConfig.RegisterRoutes(RouteTable.Routes);
       }
   }
   ```

   これにより、ビュー内で`WebOptimizer`によって最適化されたスクリプトやスタイルシートがレンダリングされます。

### まとめ
`WebOptimizer`を使用する場合、`BundleConfig.cs`はもはや必要なくなります。`WebOptimizer`が提供するAPIでバンドルや最小化の設定を行うことになります。これにより、最適化されたファイルを自動で生成し、ブラウザに配信することができます。

---
### ビューでどのように参照するか

`WebOptimizer`を使ってバンドルしたスクリプトやスタイルシートをビューで参照する方法は、`BundleConfig`を使用している場合と似ています。ただし、`WebOptimizer`のAPIを使うため、`@Scripts.Render`や`@Styles.Render`の代わりに、`@WebOptimizer`の提供するヘルパーを使います。

以下は、`WebOptimizer`を使った場合の参照方法です。

### スクリプトの参照
`WebOptimizer`を使ってスクリプトバンドルを作成した場合、ビューで以下のように参照します。

```html
@WebOptimizer.RenderScript("~/bundles/js")
```

### スタイルシートの参照
スタイルシートの場合も同様に、`RenderStyle`メソッドを使用します。

```html
@WebOptimizer.RenderStyle("~/bundles/css")
```

### 例
例えば、`WebOptimizer`を使って、以下のようにスクリプトとスタイルシートを設定したとします。

#### 1. バンドル設定（`Startup.cs` または `MvcApplication.cs`）
```csharp
public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        var options = new WebOptimizerOptions();

        // スクリプトバンドル設定
        BundleTable.Bundles.Add(new ScriptBundle("~/bundles/js").Include(
            "~/Scripts/jquery-{version}.js",
            "~/Scripts/bootstrap.js"
        ).WithOptions(options));

        // スタイルシートバンドル設定
        BundleTable.Bundles.Add(new StyleBundle("~/bundles/css").Include(
            "~/Content/bootstrap.css",
            "~/Content/site.css"
        ).WithOptions(options));

        AreaRegistration.RegisterAllAreas();
        RouteConfig.RegisterRoutes(RouteTable.Routes);
    }
}
```

#### 2. ビューでの参照
ビュー（例えば、`_Layout.cshtml`）でバンドルを参照する方法は次の通りです。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>My Web Application</title>
    
    <!-- スタイルシートの参照 -->
    @WebOptimizer.RenderStyle("~/bundles/css")

</head>
<body>
    <div class="container">
        <h1>Hello, world!</h1>
    </div>

    <!-- スクリプトの参照 -->
    @WebOptimizer.RenderScript("~/bundles/js")
</body>
</html>
```

### まとめ
`WebOptimizer`を使う場合、`@WebOptimizer.RenderScript`や`@WebOptimizer.RenderStyle`を使って、ビューファイル内でバンドルされたJavaScriptやCSSを参照します。これにより、バンドルと最小化が適用されたスクリプトやスタイルが正しくページに適用されます。