WebOptimizer：轻松实现 CSS 和 JavaScript 的压缩与打包，全面提升 ASP.NET Core 性能

对于前端性能优化方法有很多，包括：图片合并、使用缓存、使用CDN、减少重定向、减少请求、压缩等等。今天就针对减少请求、资源压缩，给大家推荐一个基于.Net开发的资源合并与压缩的开源项目。

01 项目简介

WebOptimizer 是一个专为 ASP.NET Core 设计的开源工具，用于在运行时对 CSS 和 JavaScript 文件进行打包（Bundling）和压缩（Minification），从而提升 Web 应用的性能。

它通过中间件的方式在服务器端处理静态文件，支持缓存优化和高度可扩展的管道配置。

02 核心功能

压缩（Minification）

去除代码中的多余字符（如空格、注释等），减小文件大小。
支持 JavaScript 和 CSS 文件的自动压缩。
使用 NUglify 作为压缩引擎。

打包（Bundling）

将多个文件合并为一个文件，减少 HTTP 请求。
支持通过通配符（Globbing Patterns）指定文件路径，方便批量处理。

缓存优化

提供服务器端和客户端缓存支持。
自动为文件添加版本参数（Cache Busting），确保浏览器缓存的正确性。

Tag Helpers

提供 Razor 文件中的 <script> 和 <link> 标签扩展，支持缓存优化和内容内联。
支持通过 inline 属性将文件内容直接嵌入 HTML 页面。

插件扩展

WebOptimizer.Sass：将 SCSS 文件编译为 CSS。
WebOptimizer.TypeScript：将 TypeScript 编译为 JavaScript。
WebOptimizer.AutoPrefixer：为 CSS 添加浏览器前缀。
支持多种插件，例如：

03 使用入门

1、安装依赖库

dotnet add package LigerShark.WebOptimizer.Core

2、配置中间件

services.AddWebOptimizer();
...

app.UseWebOptimizer();
app.UseStaticFiles();

3、配置打包和压缩，指定文件名或者使用通配符

services.AddWebOptimizer(pipeline =>
{
    // 压缩特定文件
    pipeline.MinifyJsFiles("js/a.js", "js/b.js");
    pipeline.MinifyCssFiles("css/**/*.css");

    // 打包文件
    pipeline.AddCssBundle("/css/bundle.css", "css/*.css");
    pipeline.AddJavaScriptBundle("/js/bundle.js", "js/*.js");
});

4、合并文件

services.AddWebOptimizer(pipeline =>
{
    pipeline.AddCssBundle("/css/bundle.css", "css/a.css", "css/b.css");    
    pipeline.AddCssBundle("/css/bundle.css", "css/**/*.css");
});

5、指定文件夹

默认情况下，所有捆绑包源文件都与 Web Root（ wwwroot ）文件夹相关，但您可以将其更改为与 Content Root 相关。

创建一个位于内容根目录中名为 node_modules 的文件夹中的文件包：

services.AddWebOptimizer(pipeline =>
{
    pipeline.AddCssBundle("/css/bundle.css", "node_modules/jquery/dist/*.js")
            .UseContentRoot();
});

完全自定义的IFileProvider，您可以使用UseFileProvider管道方法。

services.AddWebOptimizer(pipeline =>
{
    var provider = new Microsoft.Extensions.FileProviders.PhysicalFileProvider(@"C:\path\to\my\root\folder");
    pipeline.AddJavaScriptBundle("/js/scripts.js", "a.js", "b.js")
        .UseFileProvider(provider);
});

04 项目地址

github.com/ligershark/…

- End -