ASP.NET Core 靜態資源的打包與壓縮

以 Visual Studio Community 2017 15.5.1 爲例

配置文件 bundleconfig.json

新建一個AspNetCore MVC項目,項目中會有一個bundleconfig.json文件,該文件就是靜態資源打包與壓縮的配置文件. 一般bundleconfig.json文件的默認內容以下:

// Configure bundling and minification for the project.
// More info at https://go.microsoft.com/fwlink/?LinkId=808241
[
  {
    "outputFileName": "wwwroot/css/site.min.css",
    // An array of relative input file paths. Globbing patterns supported
    "inputFiles": [
      "wwwroot/css/site.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "wwwroot/js/site.js"
    ],
    // Optionally specify minification options
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    // Optionally generate .map file
    "sourceMap": false
  }
]

擴展工具 Bundler & Minifier

不過光有配置文件,並無什麼做用,還須要一個VS的擴展工具Bundler & Minifier的支持.

下載完成後,須要重啓VS,等待VSIX Installer安裝完成便可.

Bundler & Minifier安裝完成後,從新打開項目,在項目中的bundleconfig.json文件的右鍵菜單上能夠看到有對應的選項以下:

打包

這裏的打包指的是css & js等靜態資源的合併,一般在編碼過程當中會產生不少的css & js文件,能夠把它們合併輸出到一個或多個文件中去,以減小web請求的次數,間接提升網頁的性能.

壓縮

這裏的壓縮指的是css & js等靜態資源的最小化,一般在編碼過程當中,出於編碼和閱讀的整潔性,css & js代碼中一般會有一些格式化的空格、換行符、可讀的變量名、註釋等,這些對於機器而言是無心義,而且壓縮後的靜態文件體積會明顯減小,能夠減小帶寬佔用,間接提高網頁性能.

Todo

• 如何在項目構建時,自動執行靜態資源打包和壓縮功能?好比在CI環境下
• 能夠看到,實現靜態資源打包和壓縮功能的主要依賴是配置文件bundleconfig.json和擴展工具Bundler & Minifier,是否能夠在其餘在非AspNetCore MVC項目中使用?好比純靜態站點?

參考文檔:

• bundling-and-minification