ABP ASP.NET Core MVC Bundling & Minification

前言

以下介紹 ABP ASP.NET Core MVC Bundling & Minification 相關內容，

使用 Javascript 套件

在 ABP MVC 專案中的 package.json 預設只會有一個 @abp/aspnetcore.mvc.ui ...，
如果要使用其他 Javascript 套件，可以透過 npm 來安裝，
安裝完成後，有以下幾項 Copy 到 Web 專案的方式，

1.手動將需要的檔案從 node_module 目錄中 Copy 到 Web 專案的 wwwroot\libs 目錄中

2.在 abp.resourcemapping.js 中設定 mappings 後，再透過 abp install-libs，如下

module.exports = {
  aliases: {},
  mappings: {
    "@node_modules/vue/dist/vue.min.js": "@libs/vue/",
  },
};

3.需要的明件有在 @ABP NPM Packages 之中，則透過 npm install @abp/JS套件，這樣就不用特別在abp.resourcemapping.js 中設定 mappings

Page 引用 scripts 及 style files

在 Page 中引用 JS 可以使用 abp-script

@section scripts {
<abp-script src="/libs/vue/vue.min.js" />
<abp-script src="/Pages/myPage.cshtml.js" />
}

在 Page 中引用 css 可以使用 abp-style

@section styles {
<abp-style src="/Pages/myPage.cshtml.css" />
}

使用 abp-script or abp-style ，ABP 會做以下 3 件事，

1. 在 Production 環境時，會做檔案最小化
2. 在 QueryString 中加入版本號，例如 ?_v=版本號
3. 相同的檔案只會被引用一次

Page 打包 scripts 及 style files

要在 Page 中打包多個 JS or CSS 可以使用 abp-script-bundle，例如，

@section scripts {
<abp-script-bundle>
  <abp-script src="/libs/vue/vue.min.js" />
  <abp-script src="/Pages/myPage.cshtml.js" />
  @if (System.Globalization.CultureInfo .CurrentUICulture.Name == "en") {
  <abp-script src="/validator.en.js" />
  }
</abp-script-bundle>
}

設定全域 Bundles

如果要把 js or css 加到 全域 Bundles 裡，
可以在 Web 專案 WebModule 的 ConfigureBundles Method 設定 AbpBundlingOptions，

Configure<AbpBundlingOptions>(options =>
{
	options.ScriptBundles.Configure(
		BasicThemeBundles.Styles.Global,
		bundle =>
		{
			bundle.AddFiles("/libs/myglobal.js");
		}
	);
	options.StyleBundles.Configure(
		BasicThemeBundles.Styles.Global,
		bundle =>
		{
            bundle.AddFiles("/global-styles.css");
			bundle.AddFiles("/libs/myglobal.css");
		}
	);
});

• 註: BasicThemeBundles.Styles.Global 表示 Web 是使用 BasicTheme

BasicThemeBundles.Styles.Global 是 bundle 的名稱，
所以 Production 時， Render 會是 Basic.Global ...

建立給多個 Page 使用的 Bundles

如果是要給某些 Page 使用的 Bundles，則可以使用 ScriptBundles.Add，如下，

Configure<AbpBundlingOptions>(options =>
{
	options.ScriptBundles.Add(
		"RMScripts",
		bundle =>
		{
			bundle.AddFiles("/libs/rm.js");
		}
	);
});

然後在使用 Page 的 @section scripts 使用 abp-script-bundle 並設定 name，如下，

<abp-script-bundle name="RMScripts" />

預設為 production 時才會進行 bundled and minified，
如果要調整可以設定 AbpBundlingOptions 的 Mode 屬性，
Mode 屬性有以下幾個選項，

1. Auto: 預設值，production 時才會進行 bundled and minified
2. Bundle: 只 bundle 不做 minify
3. BundleAndMinify: 進行 bundled and minified
4. None: 什麼都不做

參考資源

ASP.NET Core MVC Bundling & Minification