component_js_dependencies 시 defer, async load

안녕하세요.

component_js_dependencies 템플릿 태그에서는 각 Component 의 render_js_dependencies 메서드를 호출하여 "<script src=js경로></script>\n<script src=js경로></script>" 문자열을 생성합니다.

관련 소스 코드 : https://github.com/EmilStenstrom/django-components/blob/master/src/django_components/component.py#L173

위 소스코드를 보시면, render_js_dependencies 메서드 내에서 <script>{self.js}</script> 코드와 self.media.render_js() 코드를 통해 script 태그를 조합하여, script 태그 문자열을 조합하는 데요. 기본 구현에서는 script 태그에 src 속성 외에는 추가 속성은 지원하고 있지 않습니다.

이 script 태그에 async와 defer 속성을 추가하실려면, 각 Component 클래스의 render_js_dependencies 메서드를 재정의하신 후에, 아래처럼 문자열 변경으로 원하시는 속성을 추가해주실 수 있습니다.

@component.register("예시")
class ExampleComponent(component.Component):
    # 생략

    def render_js_dependencies(self) -> SafeString:
        html = super().render_js_dependencies()
        html = html.replace("<script", "<script defer")
        return mark_safe(html)

살펴보시고 댓글 남겨주세요.

화이팅입니다. :-)