Smidge 및 Umbraco 프런트엔드

이전 버전의 Umbraco는 사이트 전체에서 스타일과 스크립트를 묶을 수 있는 ClientDependencyFramework과 함께 제공되었습니다. 실제로 백오피스에서는 모든 Javascript를 최소화하기 위해 많이 사용했습니다.

v9+에서 이것은 Smidge으로 대체되었습니다. 이는 백 오피스에 대해 동일한 작업을 수행하지만 기본적으로 프런트 엔드(웹 사이트) 파일에서 동일한 작업을 수행하도록 구성되어 있지 않습니다.

면도기 파일의 사이트 '번들'에 스크립트 또는 스타일시트를 추가할 수 있습니다.

예를 들어 면도기 템플릿에 다음을 추가할 수 있습니다.

SmidgeHelper.RequiresCss("~/css/site.css");

또는

SmidgeHelper.RequiresJs("~/scripts/payments.js");

그런 다음 다음을 사용하여 HTML의 올바른 위치에 렌더링합니다.

@await SmidgeHelper.CssHereAsync();

그리고

@await SmidgeHelper.JsHereAsync();

이것은 훌륭하게 작동하지만 몇 가지 문제가 있습니다.

기본적으로 스크립트 파일은 구성 파일에서 변경해야 하는 버전 번호로 버전이 지정됩니다. 그렇지 않으면 파일이 사이트 및 브라우저에 의해 캐시됩니다

.

이러한 기본 메서드를 사용하여 태그에 속성을 추가할 수 없습니다(예: <script src="file.js" async></script> )

다행히도 이에 대한 몇 가지 해결 방법이 있습니다.

1. 프로덕션 환경에서 dev 및 appdomain(앱을 다시 시작한 후)에 타임스탬프로 버전이 지정된 파일을 생성했습니다.

개발을 위해 css/js를 더 좋게 만드는 몇 가지 방법이 있습니다. a) render 태그에서 debug를 true로 설정할 수 있습니다.

@await SmidgeHelper.CssHereAsync(debug: true)

b) 구성을 변경할 수 있습니다.

이제 구성이 변경될 때마다 실행되는 PostConfigure 메서드를 사용하여 이 작업을 수행할 수 있습니다.

builder.Services.PostConfigure<SmidgeOptions>(o =>
{
    o.DefaultBundleOptions.ProductionOptions
    .SetCacheBusterType(typeof(TimestampCacheBuster));
});

또는 좀 더 화려하고 싶다면 다음을 기반으로 할 수 있습니다.
configureOptions 인터페이스를 통해 현재 실행 중인 환경(여기서 환경을 주입할 수 있음)

따라서 작곡가에서 다음을 가질 수 있습니다.

builder.Services.ConfigureOptions<SmidgeFrontEndSetup>();

그런 다음 IConfigureOptions<SmidgeOptions> 인터페이스가 있습니다.
개발 중인지 여부에 따라 값을 설정합니다.

public class SmidgeFrontEndSetup : IConfigureOptions<SmidgeOptions>
{
    private readonly IWebHostEnvironment _webHostEnvironment;

    public SmidgeFrontEndSetup(IWebHostEnvironment webHostEnvironment)
    {
        _webHostEnvironment = webHostEnvironment;
    }

    public void Configure(SmidgeOptions options)
    {
        if (_webHostEnvironment.EnvironmentName.Equals("Development", StringComparison.OrdinalIgnoreCase))
        {
            options.DefaultBundleOptions.ProductionOptions
                .SetCacheBusterType(typeof(TimestampCacheBuster));
        }
        else
        {
            options.DefaultBundleOptions.ProductionOptions
                .SetCacheBusterType(typeof(AppDomainLifetimeCacheBuster));
        }
    }
}

2. 스크립트 및 스타일 태그에 추가 속성을 추가합니다.

v8의 ClientDependency를 사용하면 페이지에서 번들 요소를 렌더링할 때 스크립트 또는 링크 태그에 추가 속성을 추가할 수 있습니다. smidge의 현재 릴리스에서는 기본 도우미로는 그렇게 할 수 없습니다.

하지만 루프를 사용하여 수행할 수 있습니다.

바꾸다 :

@await SmidgeHelper.JsHereAsync()

와 함께:

@{
    var urls = await SmidgeHelper.GenerateJsUrlsAsync();
    foreach(var url in urls)
    {
        <script src="@url" async></script>
    }
}

다음 단계는 이 중 일부를 헬퍼 클래스에 묶어 더 쉽게 만들 수 있지만 기본 설정 요소가 Umbraco.Core에 들어가고 SmidgeHelper 메서드가 Smidge에 들어가는 것이 좋을 것 같습니다. 그러면 이것은 모두에게 효과가 있을 수 있습니다 😄