终于等到你！WebOptimizer - A bundler and minifier for ASP.NET Core - ASP.NET编程经验-OStack程序员社区-中国程序员成长平台

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

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

原作者: [db:作者] 来自: [db:来源] 收藏邀请

迷人的 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% ，我们就实际遇到过。