文档章节

ASP.NET Core 静态资源的打包与压缩

taadis
 taadis
发布于 2017/12/08 12:52
字数 563
阅读 670
收藏 0

以 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项目中使用?比如纯静态站点?

参考文档:

© 著作权归作者所有

上一篇: AspNetCore 多环境
下一篇: 单词顺序反转
taadis

taadis

粉丝 6
博文 541
码字总数 87847
作品 0
温州
其他
私信 提问
ASP.NET Core Web 资源打包与压缩

在ASP.Net中可以使用打包与压缩这两种技术来提高Web应用程序页面加载的性能。通过减少从服务器请求的次数和减少资源文件的体积来提高加载性能。 打包是一地将多个文件(CSS,JavaScript等资源...

whltian
2018/12/29
72
0
ASP.NET MVC应用迁移到ASP.NET Core及其异同简介

ASP.NET Core是微软新推出支持跨平台、高性能、开源的开发框架,相比起原有的ASP.NET来说,ASP.NET Core更适合开发现代应用程序,如跨平台、Dorker的支持、集成现代前端开发框架(如npm、bow...

dotNET跨平台
2018/04/19
0
0
ASP.Net Core开发(踩坑)指南

  ASP.NET与ASP.NET Core很类似,但它们之间存在一些细微区别以及ASP.NET Core中新增特性的使用方法,在此之前也写过一篇简单的对比文章ASP.NET MVC应用迁移到ASP.NET Core及其异同简介,但...

7m鱼
2018/11/30
0
0
ASP.NET Core在Azure Kubernetes Service中的部署和管理

目录 ASP.NET Core在Azure Kubernetes Service中的部署和管理 ASP.NET Core在Azure Kubernetes Service中的部署和管理 目标 部署:掌握将aspnetcore程序成功发布到Azure Kubernetes Service(...

binking338
04/27
0
0
.Net core 2.x基础学习笔记(2) —— 中间件

这个系列的初衷是便于自己总结与回顾,把笔记本上面的东西转移到这里,态度不由得谨慎许多,下面是我参考的资源: ASP.NET Core 中文文档目录 官方文档 记在这里的东西我会不断的完善丰满,对于文...

半路独行
04/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

定期批量改密,实现高效运维,保障口令安全

随着企业IT资产规模的不断增大,各类主机、应用系统的管理也变得愈加困难。 对于系统管理员来说,保证操作系统的密码安全是其重要工作,在需要维护众多的主机时,其面临的困境将是: 1、难以...

堡垒啊
40分钟前
5
0
怎样在磁盘上查找MySQL表的大小?这里有答案

导读 我想知道 MySQL 表在磁盘上占用多少空间,但看起来很琐碎。不应该在 INFORMATION_SCHEMA.TABLES 中提供这些信息吗?没那么简单! 我想知道 MySQL 表在磁盘上占用多少空间,但看起来很琐碎...

问题终结者
今天
6
0
jQuery load() 方法实现加载远程数据

jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据,并把返回的数据放入被选元素中。 语法: $(selector).load(URL,data,callback);必需的 URL 参数规定您希望加载的...

前端老手
今天
5
0
Spring Boot缓存实战 Redis 设置有效时间和自动刷新缓存-2

问题 上一篇Spring Boot Cache + redis 设置有效时间和自动刷新缓存,时间支持在配置文件中配置,说了一种时间方式,直接扩展注解的Value值,如: @Override@Cacheable(value = "people#${s...

xiaolyuh
今天
10
0
怎样在磁盘上查找MySQL表的大小?这里有答案

我想知道 MySQL 表在磁盘上占用多少空间,但看起来很琐碎。不应该在 INFORMATION_SCHEMA.TABLES 中提供这些信息吗?没那么简单! 我想知道 MySQL 表在磁盘上占用多少空间,但看起来很琐碎。不应...

Linux就该这么学
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部