ASP.NET Core Web资源打包与压缩技术介绍

概述

在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

此示例来自于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 }
  • 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" rel="external nofollow"  />
    <script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment names="Staging,Production">
    <link rel="stylesheet" href="~/css/site.min.css" rel="external nofollow"  asp-append-version="true" />
    <script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>

当在开发模式下运行应用程序，我们使用未压缩Css和脚本文件；在生产环境中，我们压缩后的资源文件，这样可以提高应用程序的性能。

总结

在ASP.Net中可以使用打包与压缩这两种技术来提高Web应用程序页面加载的性能。

到此这篇关于ASP.NET Core Web资源打包与压缩技术介绍的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Asp.NetCore1.1版本去掉project.json后如何打包生成跨平台包

    Asp.NetCore1.1版本去掉project.json后如何打包生成跨平台包

    本章将要和大家分享的是Asp.NetCore1.1版本去掉了project.json后如何打包生成跨平台包, 为了更好跟进AspNetCore的发展,把之前用来做netcore开发的vs2015卸载后并安装了vs2017,这给我带来的直接好处是把我报红的C盘腾出10GB左右的空间,从这里直接能感受到vs2017体积如此之小:之前有写过一篇开源netcore服务的文章开源一个跨平台运行的服务插件 - TaskCore.MainForm,里面有讲述netcore项目生成和部署在win7和ubuntu

  • ASP.NET Core 文件响应压缩的常见使用误区

    ASP.NET Core 文件响应压缩的常见使用误区

    误区1:未使用 Brotil 压缩 几乎不需要任何额外的代价,Brotil 压缩算法可以帮助你的网站提升约 20% 静态资源加载性能. 同时启用 Gzip / Brotil 压缩 Gzip 有更好的 user-agent 兼容性,而 Brotli 有更好的性能. 所以我们通常需要在 ASP.NET Core 网站中同时启用这两种压缩. 如何区分 Gzip 压缩和 Brotli 压缩 网站启用 Brotli 压缩时,服务器请求返回头 Content-Encoding 中会包含 br 字样,否则是

  • .Net Core 多文件打包压缩的实现代码

    .Net Core 多文件打包压缩的实现代码

    最近项目需要实现多文件打包的功能,尝试了一些方法,最后发现使用  ICSharpCode.SharpZipLib 最符合项目的要求. 具体实现如下: 1.在 Nuget 中安装  ICSharpCode.SharpZipLib 2.将要打包的文件放到同个文件夹进行压缩: ①压缩文件夹 /// <summary> /// 压缩文件 /// </summary> /// <param name="fileName">压缩后获得的文件名</param

  • C#实现多文件打包压缩(.Net Core)

    C#实现多文件打包压缩(.Net Core)

    最近项目需要实现多文件打包的功能,尝试了一些方法,最后发现使用ICSharpCode.SharpZipLib 最符合项目的要求. 具体实现如下: 1.在 Nuget 中安装ICSharpCode.SharpZipLib 2.将要打包的文件放到同个文件夹进行压缩: ①压缩文件夹 /// <summary> /// 压缩文件 /// </summary> /// <param name="fileName">压缩后获得的文件名</param>

  • ASP.NET Core Web资源打包与压缩技术介绍

    ASP.NET Core Web资源打包与压缩技术介绍

    概述 在ASP.Net中可以使用打包与压缩这两种技术来提高Web应用程序页面加载的性能.通过减少从服务器请求的次数和减少资源文件的体积来提高加载性能. 打包是一地将多个文件(CSS,JavaScript等资源文件)合并或打包到单个文件.文件合并可减少了 Web 资源文件从服务器的所需请求数,这样也可提高页面载入的性能. 压缩是将各种不同的代码进行优化,以减少请求资源文件的体积.压缩的常见方法删除不必要的空格和注释,并将变量名缩减为一个字符. 例如下面JavaScript函数: AddAltToI

  • 如何给ASP.NET Core Web发布包做减法详解

    如何给ASP.NET Core Web发布包做减法详解

    1.引言 紧接上篇:ASP.NET Core Web App应用第三方Bootstrap模板.这一节我们来讲讲如何优化ASP.NET Core Web发布包繁重的问题. 在ASP.NET Core Web App中我们可以通过Bower或NPM来安装一些JS.CSS插件,来方便我们组织前端组件.但是这也给我带来了一个问题,那就是发布时需要把安装的Bower包或NPM包都要打包上传到服务器. 如果现在发布ASP.NET Core Web App,wwwroot下已包含到项目中的文件都会被发布.虽然

  • 详解在Azure上部署Asp.NET Core Web App

    详解在Azure上部署Asp.NET Core Web App

    在云计算大行其道的时代,当你要部署一个网站时第一选择肯定是各式各样的云端服务.那么究竟使用什么样的云端服务才能够以最快捷的方式部署一个 ASP.NET Core的网站呢?Azure 的 Web App 服务是个很好的选择. 下面我们会通过 Visual Studio 创建一个 Asp.net Core demo 应用,然后把这个 demo 应用部署到 Azure Web App.通过阅读本文,您将能了解到如何创建 Asp.NET Core 应用程序和如何在Azure上创建 Web App 并部署

  • Asp.Net Core Web应用程序—探索

    Asp.Net Core Web应用程序—探索

    前言 作为一个Windows系统下的开发者,我对于Core的使用机会几乎为0,但是考虑到微软的战略规划,我觉得,Core还是有先了解起来的必要. 因为,目前微软已经搞出了两个框架了,一个是Net标准(.NetFramework),一个是Net Core. 而新特性的更新几乎都是在Net Core这个框架中. 所以,考虑到未来,一旦Core完善了,那微软肯定会放弃现在的.NetFrameWork. 因此,.Net程序员集体改用Net Core,想来,一定是大趋势. 所以让我们怀着探索的精神来看看A

  • 在IIS上部署ASP.NET Core Web API的方法步骤

    在IIS上部署ASP.NET Core Web API的方法步骤

    对于本文,我想与您分享有关如何在IIS上部署ASP.NET Core Web API的指南.我将指导您安装Visual Studio 2019,.NET Core Runtime 3.0.我还确保我逐步引导您在服务器(Web IIS)中启用它,使用no受管代码选项创建新的应用程序池,创建ASP.NET Core Web API项目以及发布ASP.NET Core Web API. 了解并遵循正确的步骤来准备开发和部署环境后,在IIS上部署ASP.NET Core Web API就是一件容易的事.

  • ASP.NET Core Web App应用第三方Bootstrap模板的方法教程

    ASP.NET Core Web App应用第三方Bootstrap模板的方法教程

    引言 作为后端开发来说,前端表示玩不转,我们一般会选择套用一些开源的Bootstrap 模板主题来进行前端设计.那如何套用呢?今天就简单创建一个ASP.NET Core Web MVC 模板项目为例,来应用第三方Bootstrap Template--Admin LTE. AdminLte Dashboard 1. 创建ASP.NET Core MVC Demo 命令行执行dotnet new mvc -n ApplyBootstrapTemplate,即可创建预置的MVC模板项目.项目结构如下

  • 详解如何在ASP.NET Core Web API中以三种方式返回数据

    在 ASP.NET Core 中有三种返回 数据 和 HTTP状态码 的方式,最简单的就是直接返回指定的类型实例,如下代码所示: [ApiController] [Route("[controller]")] public class WeatherForecastController : ControllerBase { [HttpGet] public IEnumerable<WeatherForecast> Get() { var rng = new Random()

  • 详解ASP.NET Core Web Api之JWT刷新Token

    详解ASP.NET Core Web Api之JWT刷新Token

    前言 如题,本节我们进入JWT最后一节内容,JWT本质上就是从身份认证服务器获取访问令牌,继而对于用户后续可访问受保护资源,但是关键问题是:访问令牌的生命周期到底设置成多久呢?见过一些使用JWT的童鞋会将JWT过期时间设置成很长,有的几个小时,有的一天,有的甚至一个月,这么做当然存在问题,如果被恶意获得访问令牌,那么可在整个生命周期中使用访问令牌,也就是说存在冒充用户身份,此时身份认证服务器当然也就是始终信任该冒牌访问令牌,若要使得冒牌访问令牌无效,唯一的方案则是修改密钥,但是如果我们这么做了,

  • ASP.NET Core Web API 教程Project Configuration

    ASP.NET Core Web API 教程Project Configuration

    目录 1. 创建新项目 2. launchSettings.json 文件 3. Program.cs 和 Startup.cs 4. 扩展方法和 CORS 配置 5. IIS 配置 6. Startup 类中的其它代码 7. 基于环境的设置 前言: 本系列文章主要参考了<Ultimate ASP.NET Core 3 Web API>一书,对原文进行了翻译,同时适当删减.修改了一部分内容. 对于某些概念和原理,原书和本文中都没有进行详细描述,如果一一详细介绍,内容就显得臃肿且混乱,我个人是先

  • 创建ASP.NET Core Web应用程序并介绍项目模板

    创建ASP.NET Core Web应用程序并介绍项目模板

    目录 创建ASP.NET Web 应用程序 运行ASP.NET Core Web 应用程序: ASP.NET Core应用程序模板 空 API Web应用程序模板 Web应用程序(模型视图-控制器)模板 Angular, React.js, React.js, and Redux: 创建ASP.NET Web 应用程序 打开安装后的VisualStudio 2019,点击"创建新项目", 如下所示. 单击"创建新项目"框后,它将打开"创建新项目"

随机推荐