您的当前位置:首页正文

捆绑和缩小ASP.NET Core MVC中的静态资源

来源:花图问答

WEB网站发布时,通常需要缩小静态资源文件,如css,js等,一般的做法是删除文件中的注释、不必要的空格和换行字符以及缩短变量名等等,目的是减小文件体积,提升加载速度。如果有多个css或js文件,还可以把它们捆绑到一个文件中,减少用户的下载次数。

Core提供了捆绑和缩小静态资源的方式。

Core模板生成的默认缩小文件。我们可通过配置和第三方工具把我们自己的css和js文件缩小并捆绑到这两个文件中。

在项目根目录下添加bundleconfig.json文件,在文件中添加如下内容:

[
    {
        "outputFileName":
        "inputFiles": [
           
           
        ]
    },
    {
        "outputFileName":
        "inputFiles": [
            
        ],
        "minify": {
            "enabled": true,
            "renameLocals": true
        },
        "sourceMap": false
    }
]

这是捆绑和缩小的默认配置,这个文件中定义了两个捆绑和缩小配置。

第一个是捆绑和缩小css文件,outputFileName指定了缩小后的文件名,inputFiles指定要缩小的文件名,如果有多个inputFile,则会捆绑到outputFileName中。例如我的inputFiles包含了两个文件:site.css,layout.css,生成后的site.min.css文件中将包含这两个文件缩小的内容。

第二个是捆绑和缩小js文件,同时指定了一些选项。minify指定缩小选项,enable=true指定可以缩小,renameLocals=true指定缩小时会修改变量名。sourceMap指示是否同时生成一个映射文件。

写好配置文件之后,使用NeGet添加程序包

在“工具”菜单下,点击“管理解决方案的N产Get程序包“

查找“BuildBundlerMinifier"并安装,

重新生成项目,BuildBundlerMinifier就会执行捆绑和缩小。