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