WebSurfer's Home

トップ > Blog 1   |   Login
Filter by APML

ASP.NET Core MVC の Bundle と Minify

by WebSurfer 6. February 2020 15:49

ASP.NET Core 3.1 MVC で .css ファイルと .js ファイルをバンドル&ミニファイする機能を実装しようとしてハマった話を書きます。

Bundle と Minify

手順は Microsoft のドキュメント Bundle and minify static assets in ASP.NET Core に詳しく書いてあります。

ドキュメントにはいろいろ書いてありますが、ビルド時にバンドル&ミニファイ版の .css ファイル、.js ファイルを生成するなら下の (1), (2) の手順だけで可能です。

(1) Configure bundling and minification のセクションに従ってアプリケーションルートに bundleconfig.json を追加。以下にドキュメントに記載されている例を書いておきます。詳しい説明はドキュメントを読んでください。

[
  {
    "outputFileName": "wwwroot/css/site.min.css",
    "inputFiles": [
      "wwwroot/css/site.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "wwwroot/js/site.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  }
]

(2) Build-time execution of bundling and minification のセクションに従って BuildBundlerMinifier を NuGet からインストール。(BundlerMinifier.Core ではないので注意)

BuildBundlerMinifier をインストール

ここまでの設定で、Visual Studio でプロジェクトをビルドする時、bundleconfig.json の inputFiles に指定した .css, .js ファイルをバンドル&ミニファイして outputFileName に指定したパス/ファイル名で配置してくれます。一番上の画像の赤枠で囲ったファイルを見てください。

Visual Studio が自動的にやってくれるのはここまでであることに注意してください。

一番上の画像のようにバンドル&ミニファイ版のファイルを作って配置してくれるだけなので、例えば元のソースが以下のように通常版のパスを参照している場合は site.css ⇒ site.min.css、site.js ⇒ site.min.js に書き換える必要があります。ちなみに、テンプレートで自動生成される _Layput.cshtml がデフォルトで下記のようになっています。

<link rel="stylesheet" href="~/css/site.css" />
<script src="~/js/site.js"></script>

ここが Microsoft のドキュメントに書いてなくて、何故記事の通りやっているのにバンドル&ミニファイされないのか分からず、半日ぐらいハマってしまったところです。(汗)

そんなの当たり前に分かるだろうと思われるかもしれませんね。でも、.NET Framework MVC の場合は、テンプレートでプロジェクトを自動生成するだけで、web.config で <compilation debug="true" ... > と設定してある時は通常版の .css と .js ファイルが、debug="false" の時はバンドル&ミニファイ版が自動的に設定されるのです。

自分は Core MVC でも .NET Framework MVC と同様に、そこまで面倒見てくれると思い込んでいたので気が付きませんでした。(涙)

Tags: , , ,

CORE

About this blog

2010年5月にこのブログを立ち上げました。その後 ブログ2 を追加し、ここは ASP.NET 関係のトピックス、ブログ2はそれ以外のトピックスに分けました。

Calendar

<<  July 2020  >>
MoTuWeThFrSaSu
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789

View posts in large calendar