ASP.NET CoreWeb资源打包与压缩
2017-07-05 09:23
375 查看
概述
在ASP.Net中可以使用打包与压缩这两种技术来提高Web应用程序页面加载的性能。通过减少从服务器请求的次数和减少资源文件的体积来提高加载性能。打包是一地将多个文件(CSS,JavaScript等资源文件)合并或打包到单个文件。文件合并可减少了 Web 资源文件从服务器的所需请求数,这样也可提高页面载入的性能。
压缩是将各种不同的代码进行优化,以减少请求资源文件的体积。压缩的常见方法删除不必要的空格和注释,并将变量名缩减为一个字符。
例如下面JavaScript函数:
AddAltToImg = function (imageTagAndImageID, imageContext) { ///<signature> ///<summary> Adds an alt tab to the image // </summary> //<param name="imgElement" type="String">The image selector.</param> //<param name="ContextForImage" type="String">The image context.</param> ///</signature> var imageElement = $(imageTagAndImageID, imageContext); imageElement.attr('alt', imageElement.attr('id').replace(/ID/, ''));}压缩后,函数简化为如下:
AddAltToImg=function(t,a){var r=$(t,a);r.attr("alt",r.attr("id").replace(/ID/,""))};除了删除注释和不必要的空格之外,参数和变量名称被重命名(缩写)如下:
原始名称 | 重命名后 |
---|---|
imageTagAndImageID | t |
imageContext | a |
imageElement | r |
bundleconfig.json文件
MVC项目模板提供了一个“bundleconfig.json”配置文件,它定义了打包的配置选项。默认情况下,实现了自定义脚本文件(wwwroot/js/site.js) 和样式表 (wwwroot/css/site.css) 文件的配置。[ { "outputFileName": "wwwroot/css/site.min.css", "inputFiles": [ "wwwroot/css/site.css" ] }, { "outputFileName": "wwwroot/js/site.min.js", "inputFiles": [ "wwwroot/js/site.js" ], "minify": { "enabled": true, "renameLocals": true }, "sourceMap": false }]配置选项详细说明:
outputFileName - 要输出打包包文件的路径。 与bundleconfig.json 文件的相对路径。 必填
inputFiles - 要打包的的文件路径数组。 与是配置文件的相对路径。 选填, 如果是空值会输出一个空文件。 支持通配符模式。
minify - 输入出类型的压缩选项。 选填, 默认值 -minify: { enabled: true }
输入出文件类型可用配置选项。
CSS Minifier
JavaScript Minifier
HTML Minifier
includeInProject - 将生成的文件添加到项目。 选填, 默认值 - false
sourceMaps - 生成合并文件的源文件映射。 选填, 默认值 - false
在项目中使用打包和压缩
在VS 2015/2017需要选项安装BundlerMinifierVsix,安装完成后需要重启VS。在bundleconfig.json文件右键单击,然后选择任务运行程序资源管理器。
在Update all fiels选项右键单,然后选择Run。
在项目中会分别生成压缩后的资源文件。
在视图中使用打包压缩后的资源文件
在上一篇博客我们已经讨论过在《ASP.NET Core配置环境变量和启动设置》,在视图通过 Environment 标签,分别定义开发、预演和生产环境加载对应的资源文件。<environment names="Development"> <link rel="stylesheet" href="~/css/site.css" /> <script src="~/js/site.js" asp-append-version="true"></script></environment><environment names="Staging,Production"> <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" /> <script src="~/js/site.min.js" asp-append-version="true"></script></environment>当在开发模式下运行应用程序时,我们使用未压缩Css和脚本文件;在生产环境中,我们压缩后的资源文件,这样我们也可提高应用程序的性能。
相关文章推荐
- ASP.NET Core Web 资源打包与压缩
- ASP.NET Core Web 资源打包与压缩
- ASP.NET MVC优化--静态资源捆绑打包和压缩(Bundling and minification)提高页
- Asp.Net静态资源动态压缩之WebOptimization
- C#实现多级子目录Zip压缩解压实例 NET4.6下的UTC时间转换 [译]ASP.NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了 asp.Net Core免费开源分布式异常日志收集框架Exceptionless安装配置以及简单使用图文教程 asp.net core异步进行新增操作并且需要判断某些字段是否重复的三种解决方案 .NET Core开发日志
- ASP.NET MVC 静态资源打包和压缩问题小记
- asp.net core合并压缩资源文件引发的学习之旅
- asp.net core合并压缩资源文件引发的学习之旅
- Asp.net 组件开发中web资源文件(图片、js)的调用问题
- Asp.Net Web项目打包
- asp.net打包过程详解(WEB程序也能打包)
- ASP.net 2.0 中 WebResource.axd 管理Image,JS,CSS资源
- SEO_ASP.net SEO优化(包含URL地址重写\viewState移动和压缩至服务器\SEO信息XML生成_根据URL地址重写文件)\web网站内容压缩 源码公开.本人授权可使用于商业项目。
- ASP.net 2.0 中 WebResource.axd 管理资源的一些知识点
- ASP.NET生成压缩文件(rar打包)
- Asp.Net Web项目打包
- ASP.NET生成压缩文件(rar打包)
- ASP.NET AJAX 资源脚本压缩的秘密
- asp.net 开发的WEB项目和数据库打包成exe安装文件
- ASP.net 2.0 中 WebResource.axd 管理资源的一些知识点