在 ASP.NET Core 中進行打包 (Bundling) 和緊縮 (Minification)
這篇文章講介紹在 ASP.NET Core 中進行打包和緊縮操作。 對於 JavaScript 代碼和 CSS 代碼的打包和緊縮可以提高 ASP.NET Core Web 應用的性能。
什么是打包 (bundling) ?
打包時將多個文件合並為單個文件的過程。例如,我們可以將多個小型的 JavsScript 文件合並為單個 JavaScript 文件以提高下載的性能,對於 CSS 也是如此。更少的文件數量意味着更少的 HTTP 請求數量,可以提高頁面加載的性能。
什么是緊縮 (BundlerMinifier) ?
緊縮是在不影響功能的前提下,刪除不需要的內容,例如 JavaScript 中的注釋,或者將長的變量名稱替換為更短的名稱的過程。它會刪除注釋,額外的空白,以及將長的變量名稱轉換為更短的名稱。
內置的 BundlerMinifier 工具
BundlerMinifier 是內置於 VS 2019 中,以擴展形式存在的工具。它可以完全與 ASP.NET Core 項目集成。來處理對於 JavaScript 和 CSS 的打包和緊縮。
VS 2022 中的版本:https://marketplace.visualstudio.com/items?itemName=Failwyn.BundlerMinifier64
Step 1
在 VS 2019 或者 2022 的菜單中選擇 Extensions,然后點擊 Manage Extensions 菜單項,這樣會彈出管理擴展的窗口。
Step 2
在右邊的搜索欄中輸入 Bundler ,在找到之后,點擊下載並安裝。
它會要求你關閉 Visual Studio,然后就會啟動安裝過程。在它提示你修改的時候,點擊修改就可以完成。
Step 3
現在重新啟動 Visual Studio,打開你的 ASP.NET Core 項目,打開 wwwroot 文件夾,選擇准備進行緊縮的文件,右鍵之后,選擇 Bunder & Minifier,選擇 Minify File。它就會創建與你的文件同名的緊縮版本,並在項目中生成一個 bundleconfig.json 文件
其中內容為:
[
{
"outputFileName": "wwwroot/css/style.min.css",
"inputFiles": [
"wwwroot/css/style.css"
]
}
]
這個 bundleconfig.json 文件是標准的 JSON 文件,非常易於理解。在該文件中,每個打包的輸出文件名稱使用 outputFileName
定義,對應的 inputFiles
表示用來打包的源文件數組。每個數組對應一個輸出文件。還可以通過 bundleconfig.json 文件來控制緊縮的過程,包括重命名本地的 JavaScript 文件以及是否為 JavaScript 生成 SourceMap 文件。
如果你不是在 JavaScript 或者 CSS 文件上右鍵,而是在 bundleconfig.json 文件上右鍵,那么你會得到更多的功能。
如果你選擇了 Enable bundle on build
功能,那么 Visual Studio 就會下載並安裝對應的 NuGet 包,如果你還沒有安裝的話。