Asp.Net Core 捆绑包，压缩文件和gzip CSS和Javascript文件

---

前言

在本文中，如何在ASP中捆绑、压缩和gzip静态文件。Net Core(所有版本)。对于一个web应用程序，性能加载页面是非常重要的，所以我们需要减少页面大小，以使网站加载更快。为了减少页面大小，我们有很多事情要做，例如:定制img，捆绑Js, CSS，托管，服务器，但在这篇文章中，做到捆绑Js和CSS文件。

---

 

一、安装环境和创建项目

 

我们需要一个visual studio编辑器来编写代码。我将使用VS2019创建这个示例。您可以使用较低的版本。我将创建ASP.Net Core项目最新版本为5.0。你可以在任何版本的.net框架中使用bundle、minification、gzip CSS和Js文件，这样你就可以选择任何版本的。net core了。我刚刚创建了一个项目web应用Asp。Net Core的名字是BundleStatics。

二、安装 bundle 和 minification

 这一步非常重要，因为当你按Ctrl+S时，这个插件会自动绑定。

项目创建完成后，在visual studio的菜单栏中选择扩展 >管理扩展。

选择左侧的在线项目，在右侧的搜索栏中输入minifier，你会看到搜索结果有一个Bundler & minifier扩展名，然后点击下载按钮安装。

完成下载后，您需要关闭visual studio以继续安装Bundler & Minifier扩展。

点击Modify按钮，等待安装完成，然后打开VS准备使用。

 

三、捆绑和压缩静态文件

首先，我们需要创建bundleconfig.json位于项目的根目录。该文件将包含bundle文件的设置。

通过捆绑，您可以将多个文件加入到一个文件中，删除所有空间。它有助于减少静态文件的大小。

[
 { 
   "outputFileName": "wwwroot/styles/libs-css.css", 
   "inputFiles": 
   [ 
     "wwwroot/css/site.css", 
     "wwwroot/css/basic.css" 
   ] 
 }, 
 { 
   "outputFileName": "wwwroot/scripts/libs-js.js", 
   "inputFiles": 
   [ 
     "wwwroot/lib/jquery/dist/jquery.js",         
     "wwwroot/js/site.js" 
   ] 
  } 
]

outputFileName  ：在设置新路径文件时，可以将一个bundle文件设置为另一个文件夹。

inputFiles  ： 需要构建的文件路径集合

配置文件完成后，按Ctrl+S所有文件束将自动生成如下图

 

四、配置gzip 文件

要制作一个gzip文件，我们将使用Gulpjs。要安装Gulpjs，可以查看Glup的指导原则gulpjs配置地址。

下面使用的："npm"=>"cnpm"

1.安装glup包

在安装Gulpjs之前，您需要在您的计算机上安装Node.js。

检查完Nodejs和NPM后，打开CMD并指向包含项目的文件夹。

运行以下命令以安装Gulpjs的CLI：

npm install --global gulp-cli

下一步，我们需要创建一个package.json文件来存储关于包的信息。输入下面的命令

可以不要：{

npm init

}

下一步，我们需要安装三个Gulpjs包

npm install --save-dev gulp
npm install --save-dev rimraf
npm install --save-dev gulp-gzip

安装完成后，您将看到项目的依赖项，并看到已安装的所有包。

2.创建 gulpfile.js 文件

  在项目的根目录创建gulpfile.js文件。

这个文件的内容将包含如下7个步骤

//Step 1: 导入 gulp 库
var gulp = require("gulp"),
    rimraf = require("rimraf"),
    gzip = require("gulp-gzip");
//Step 2: 设置路径包含css和js文件
var paths = {
    webroot: "./wwwroot/"
};
//Step 3: 设置路径文件将得到gzip
paths.minJs = paths.webroot + "scripts/**/*.min.js"; // only get min file from scripts folder
paths.minCss = paths.webroot + "styles/**/*.min.css";
//Step 4: 文件夹将存储新的gzip文件
paths.concatGzJsDest = paths.webroot + "scripts";
paths.concatGzCssDest = paths.webroot + "styles";
//Step 5: 创建命令以清除gzip 
gulp.task("clean:gzJs", done => rimraf(paths.concatGzJsDest, done));
gulp.task("clean:gzCss", done => rimraf(paths.concatGzCssDest, done));
gulp.task("clean", gulp.series(["clean:gzCss", "clean:gzJs"]));
//Step 6: 创建命令到gzip css & js文件
gulp.task('gzip:gzJs', function () {
    return gulp.src(paths.minJs)
        .pipe(gzip())
        .pipe(gulp.dest(paths.concatGzJsDest));
});
gulp.task('gzip:gzCss', function () {
    return gulp.src(paths.minCss)
        .pipe(gzip())
        .pipe(gulp.dest(paths.concatGzCssDest));
});
//Step 7: 执行 Gzip
gulp.task("gzip", gulp.series(["gzip:gzCss", "gzip:gzJs"]));
// A 'default' task is required by Gulp v4
gulp.task("default", gulp.series(["gzip"]));

注意：Gulp js支持所有的bundle, minify和gzip类型，所以你可以使用它来做所有的事情，但使用bundleconfig来捆绑，minify我感觉比。

3.生成Gzip文件

选择视图->其他窗口->任务运行程序资源管理器

如果您看到如下图像，您需要重新启动visual studio

在重置VS之后，你会看到一些选项如下所示

要清除所有的Js 和 CSS包，双击【clean】选项。要gzip所有的Js和CSS双击【gzip】选项，【default】选项帮助gzip所有的CSS和Js通过默认设置的Gulp。

现在我们将gz文件导入到HTML页面

但是CSS文件不接受并将CSS应用到web页面。

这个问题是因为浏览器不能自动读取gz文件，我们需要添加一个中间件来接受gzip头内容。

要添加中间件，我们需要在Startup.cs文件的Configure()方法中定制UseStaticFiles()函数。

将默认的UserStaticFiles()更改成

app.UseStaticFiles(new StaticFileOptions
{
    OnPrepareResponse = context =>
    {
        IHeaderDictionary headers = context.Context.Response.Headers;
        string contentType = headers["Content-Type"];
        if (contentType == "application/x-gzip")
        {
            if (context.File.Name.EndsWith("js.gz"))
            {
                contentType = "application/javascript";
            }
            else if (context.File.Name.EndsWith("css.gz"))
            {
                contentType = "text/css";
            }
            headers.Add("Content-Encoding", "gzip");
            headers["Content-Type"] = contentType;
        }
    }
});

构建代码并重新加载web页面以查看结果

下面是展示gzip和min文件的加载时间，并比较加载文件的大小，可以看出还是有一定的效果

五、总结以及感谢

1.主要还是gulp.js的使用，捆绑不捆绑的到无所^_^

感谢：Do Dung

 

 

 

 

 

 

 

 

 

 

 

 

 

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。