zoukankan      html  css  js  c++  java
  • 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的支持. 搜索、下载、安装 Bundler & Minifier 扩展工具

    下载完成后,需要重启VS,等待VSIX Installer安装完成即可.

    Bundler & Minifier 安装完成

    Bundler & Minifier安装完成后,重新打开项目,在项目中的bundleconfig.json文件的右键菜单上可以看到有对应的选项如下:

    Bundler & Minifier 菜单选项

    打包

    这里的打包指的是css & js等静态资源的合并,通常在编码过程中会产生很多的css & js文件,可以把它们合并输出到一个或多个文件中去,以减少web请求的次数,间接提高网页的性能.

    压缩

    这里的压缩指的是css & js等静态资源的最小化,通常在编码过程中,出于编码和阅读的整洁性,css & js代码中通常会有一些格式化的空格、换行符、可读的变量名、注释等,这些对于机器而言是无意义,并且压缩后的静态文件体积会明显减少,可以减少带宽占用,间接提升网页性能.

    Todo

    • 如何在项目构建时,自动执行静态资源打包和压缩功能?比如在CI环境下
    • 可以看到,实现静态资源打包和压缩功能的主要依赖是配置文件bundleconfig.json和扩展工具Bundler & Minifier,是否可以在其他在非AspNetCore MVC项目中使用?比如纯静态站点?

    参考文档:

  • 相关阅读:
    高校教师职评
    高校教师曝职评内幕:混行政圈比科研圈更重要
    【50.88%】【Codeforces round 382B】Urbanization
    【64.22%】【codefoces round 382A】Ostap and Grasshopper
    【u253】售货厅
    【u250】manhattan
    【19.77%】【codeforces 570D】Tree Requests
    【t063】最聪明的机器人
    Java Web整合开发(38) -- Log4J
    公网 or 内网
  • 原文地址:https://www.cnblogs.com/taadis/p/12126040.html
Copyright © 2011-2022 走看看