• 终于等到你!WebOptimizer


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

  • 相关阅读:
    浏览器渲染原理
    前端日常工作性能优化条例
    前端的发展历程
    【YOLO-V1】You Only Look Once: Unified, Real-Time Object Detection
    ModuleNotFoundError: No module named 'keras_retinanet.utils.compute_overlap'
    python学习笔记:线性回归
    软件安装笔记5:navicat for mysql及其简单应用
    python学习笔记39:sklearn
    python学习笔记38:matplotlib
    python学习笔记37:pandas
  • 原文地址:https://www.cnblogs.com/dudu/p/8880525.html
Copyright © 2020-2023  润新知