实用技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > ASP.NET > 实用技巧 > ASP.NET Core Web资源打包与压缩

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

作者:Sweet-Tang

这篇文章介绍了ASP.NET Core Web资源打包与压缩技术,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

概述

在ASP.Net中可以使用打包与压缩这两种技术来提高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
  }
]

配置选项详细说明:

在项目中使用打包和压缩

在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资源打包与压缩技术介绍的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文