ASP.NET Core Web 资源打包与压缩

本文将介绍使用的打包和压缩的优点,以及如何在ASP.NET Core应用程序中使用这些功能。

概述

在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/,""))};

除了删除注释和不必要的空格之外,参数和变量名称被重命名(缩写)如下:

原始名称重命名后
imageTagAndImageIDt
imageContexta
imageElementr

此示例来自于github:https://github.com/aspnet/Docs/blob/master/aspnetcore/client-side/bundling-and-minification.md

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中可以使用打包与压缩这两种技术来提高Web应用程序页面加载的性能。希望上面的内容对大家的学习有所帮助,谢谢!

感谢无语1994提供的另一个解决方案,通过安装BundlerMinifier Nuget包,也可以达到合并与压缩的目的。原文地址:《10,关于在vs2017中的netcore项目使用BundlerMinifier 配置问题》。

参考:

  • https://github.com/aspnet/Docs/blob/master/aspnetcore/client-side/bundling-and-minification.md

  • https://www.codeproject.com/Articles/1158377/NET-Core-Startup

第一次使用Markdown写博客,还不是很习惯,排版不够整齐,请大家见谅,谢谢

原文地址:http://www.cnblogs.com/tdfblog/p/bundling-and-minification-in-asp-net-core.html


.NET社区新闻,深度好文,微信中搜索dotNET跨平台或扫描二维码关注

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/324805.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

班级日常分享 | 一天一瞬间!

点击上方蓝色关注我们&#xff01;介于最近同学们的学习劲头十足的样子&#xff0c;我和丁老师商量决定晚上不布置作业&#xff0c;看一部电影放松放松&#xff01;昨晚下晚自习后&#xff0c;零零散散的还有一部分同学在教室里面学习&#xff0c;值班老师都催促多次&#xff0…

句法分析(syntactic parsing)在NLP领域的应用是怎样的

转载自 句法分析&#xff08;syntactic parsing&#xff09;在NLP领域的应用是怎样的 句法分析&#xff08;syntactic parsing&#xff09;在NLP领域的应用是怎样的&#xff1f; 文章整理自郭江师兄问题回答&#xff08;被收录于知乎编辑推荐&#xff09;&#xff01;已取得…

新的学期、新的开始、新的付出、新的收获!

点击上方蓝色关注我们&#xff01;本文原创&#xff1a;王晓丹同学初次&#xff0c;我漫步在静静的校园&#xff0c;深情的黄昏&#xff0c;显得格外惹人喜爱。哇&#xff01;那是什么&#xff1f;我情不自禁的喊了出来&#xff0c;一颗石榴树 &#xff0c;引起了我满满的回忆&…

ASP.NET Core Web API 最小化项目

ASP.NET Core中默认的ASP.NET Core 模板中有Web API 模板可以创建Web API项目。 有时&#xff0c;只需要创建一个API&#xff0c;不需要关心Razor&#xff0c;本地化或XML序列化。通过删除无用的NuGet软件包和代码&#xff0c;可以提高 API 的加载时间并减少部署包大小。 新建…

LinkedHashSet VS HashSet

LinkedHashSet的使用 LinkedHashSet作为HashSet的子类&#xff0c;在添加数据的同时&#xff0c;每个数据还维护了两个引用&#xff0c;记录此数据前一个 数据和后一个数据。 优点&#xff1a;对于频繁的遍历操作&#xff0c;LinkedHashSet效率高于HashSet

隐马尔科夫模型-基本模型与三个基本问题

转载自 隐马尔科夫模型-基本模型与三个基本问题 隐马尔科夫模型-基本模型与三个基本问题 这次学习会讲了隐马尔科夫链&#xff0c;这是一个特别常见的模型&#xff0c;在自然语言处理中的应用也非常多。 常见的应用比如分词&#xff0c;词性标注&#xff0c;命名实体识别等…

日常技术分享 : 一定要注意replcaceAll方法,有时候会如你所不愿!

点击上方蓝色关注我们&#xff01;今天&#xff0c;踩过了一个雷&#xff0c;特此整理了一下&#xff0c;以防大家也被中招&#xff01;事情是这样的&#xff0c;在做一个项目时&#xff0c;需要用到String类的replcaceAll方法&#xff0c;可以这么说&#xff0c;该方法就是替换…

在微服务中如何管理数据

来自Stitch Fix团队的工程副总裁Randy Shoup在QCon纽约2017会议上讨论了如何在基于微服务的应用中管理数据和隔离持久化。他还介绍了将事件&#xff08;Event&#xff09;作为微服务的第一类构造。他介绍自己的团队将机器学习技术应用到了业务的各个组成部分&#xff0c;比如购…

jozj3419-最大利润【树形dp】

前言 树形dp是前天学的&#xff0c;题目也是前天做的&#xff0c;可博客却是今天发的。 正题 题目大意 一棵树一样的火车站&#xff0c;每个站点有不同的利润&#xff0c;不能连续选择相连的两个站点的利润&#xff0c;求最大利润。 输入输出&#xff08;建议无视&#xf…

隐马尔科夫模型-前向算法

转载自 隐马尔科夫模型-前向算法 隐马尔科夫模型-前向算法 在该篇文章中讲了隐马尔科夫模型&#xff08;HMM&#xff09;一基本模型与三个基本问题 隐马尔科夫模型-基本模型与三个基本问题&#xff0c;这篇文章总结一下隐马尔科夫链&#xff08;HMM&#xff09;中的前向与后…

线段树初见——区间询问与改变最大值

前言 昨天某B组讲主席树&#xff0c;然后就作死的去听了&#xff0c;也没听懂&#xff08;因为连线段树都不懂&#xff09;&#xff0c;然后好奇心就去问了一下老师线段树是个蛤&#xff0c;然后这篇博客就诞生了。 正题 首先线段树就是一个可以快速区间改变和询问的东东&am…

关系数据库理论

依赖 候选码 三大范式 公理系统 求最小函数的依赖集 例 解 模式分解

19级:班级日常分享 | 一天一瞬间

点击上方蓝色关注我们&#xff01;昨天没有看到他们早读&#xff0c;有点失落。今天再一次去教室&#xff0c;还未走到门口呢&#xff0c;就听见教室里面的早读生透过门缝传出&#xff0c;甚是开心。在陪他们早读的时候&#xff0c;自己顺便读了几篇散文和古诗古文&#xff0c;…

在Visual Studio 2017中使用Asp.Net Core构建Angular4应用程序

前言 Visual Studio 2017已经发布了很久了。做为集成了Asp.Net Core 1.1的地表最强IDE工具&#xff0c;越来越受.NET系的开发人员追捧。 随着Google Angular4的发布。我一直在想&#xff0c;怎么能够用这个地表最强IDE工具编写Angular4的Asp.Net Core项目。经过不懈的研究。终…

机器学习中向量化编程总结记录

转载自 机器学习中向量化编程总结记录 向量化编程总结记录 很多时候&#xff0c;我们在实现算法的时候&#xff0c;总会碰到累和的伪代码&#xff1a; 比如下面这个&#xff1a; 为了简单我这里只重复5次&#xff0c;但是原理是一样的。 很显然我们要得到这个结果&#xf…

Spring整合Mybatis-完成用户登录

①导入的jar包: ②在src下创建并配置applicationcontext.xml文件 <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/beans"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance&qu…

【jzoj】2018.2.7NOIP普及组——某【BC】组模拟赛

前言 ……终于改完了&#xff0c;像之前小L一样崩溃。今天C组和B组一起做题&#xff0c;所以…… 正题 题目1&#xff1a;教主的花园&#xff08;jzoj1792&#xff09; 一平面直角坐标系&#xff0c;在x轴的位置建立一堵墙&#xff0c;墙上有n道门&#xff0c;给出门的位置&a…

刘奕佳: 我的职校新生活 | 班级日常分享

点击上方蓝色关注我们&#xff01;时光匆匆&#xff0c;一转眼到了开学季&#xff0c;校园里弥漫着浓重的书香之气踏入校园&#xff0c;映入眼帘的就是雄伟的教学楼&#xff0c;意气风发的朗朗书声&#xff0c;让人情不自禁的陷入深深的学习中。实训楼当熟悉的上下课铃声又在我…

一个非常好的依存句法可视化工具

转载自 一个非常好的依存句法可视化工具 一个非常好的依存句法可视化工具 在依存句法研究中&#xff0c;常见的CONLL格式的句法树库&#xff0c;一眼看上去就不是太明白整棵树的结构。 这里分享推荐一个南京大学nlp实验室制作的一个依存句法可视化工具&#xff0c;效果如图…