终于等到你!WebOptimizer - A bundler and minifier for ASP.NET Core

时间:2022-01-23 13:48:56

迷人的 ASP.NET Core 有一个美中不足之处,自从一开始接触它到现在,我就一直不喜欢,一直想找到替代品,甚至想过自己实现一个,它就是 BundlerMinifier 。

昨天面对 bundleconfig.json 中的一堆配置,又带着侥幸的心理试着在网上搜了搜看有没有替代品,突然发现了 WebOptimizer :

ASP.NET Core middleware for bundling and minification of CSS and JavaScript files at runtime. With full server-side and client-side caching to ensure high performance. No complicated build process and no hassle.

一看介绍就感觉它就是我一直在苦苦寻找与等待的,于是立马在项目中尝试体验。

先安装 nuget 包

dotnet add package LigerShark.WebOptimizer.Core

然后在 Startup 的 ConfigureServices 中配置好 Bundle 并注册到依赖注入容器

 public void ConfigureServices(IServiceCollection services)
{
services.AddWebOptimizer(ConfigureBundles);
} private void ConfigureBundles(IAssetPipeline pipeline)
{
pipeline.AddCssBundle("/css/signup.min.css",
"css/account/signup.css"); pipeline.AddJavaScriptBundle("/js/signup.min.js",
"lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js",
"lib/jquery-validation/dist/jquery.validate.js",
"js/account/signup.js");
}

接着通过 Startup 的 Configure 将其添加到 Middleware 管线

public void Configure(IApplicationBuilder app)
{
app.UseWebOptimizer();
}

最后在 _ViewImports.cshtml 中添加 WebOptimizer.Core 的 TagHelper 引用

@addTagHelper *, WebOptimizer.Core

添加 TagHelper 之后,WebOptimizer.Core 会自动给视图中的 css/js 引用加上版本号查询字符串,连  asp-append-version="true" 都不需要,比如下面的 css/js 引用

<link href="~/css/signup.min.css" rel="stylesheet" />
<script src="~/js/signup.min.js"></script>

会被自动转换为

<link href="/css/signup.min.css?v=l1oNLvTwQYc06WsxQTHsgCtv7Hs" rel="stylesheet" />
<script src="/js/signup.min.js?v=_b5vuVfEmb-PSHHvHWLVB7PPi7w"></script>

这样就搞定了!

果然它就是我一直在找的  BundlerMinifier 的替代品。

补充:

如何让 WebOptimizer 在 Development 环境下不对 css/js 进行打包

注意:

WebOptimizer 使用的 css minifier 引擎是 Uglify ,在处理有些 css 文件时会造成 CPU 100% ,我们就实际遇到过。