라라벨 vite 에서 파일별로 async, defer 사용하기 > IT 기술백서

[code]

@vite(['resources/js/app.js', 'resources/js/js-alert.2.0.0.min.js', 'resources/js/global.js'])

[/code]

blade 에서 위와 같이 사용하였을 경우 모두 아래와 같이 출력된다.

[code]

<script type="module" src="http://..../build/assets/global-ae95abc4.js"></script>

[/code]

내 경우에는 global.js 에 아래와 같이 Alpine data 를 사용하려 했으나 작동이 되지 않았다.

[code]

window.addEventListener('alpine:init', () => {

  Alpine.data('global', () => ({

    init() {

      console.log('global')

    }

  }))

});

[/code]

이유는 Alpine.start() 가 진행되기 전에 정의가 되어야 하는데 그 후에 출력되어서였다.

그래서 async 를 붙여주기 위해 서비스컨테이너에 아래와 같이 설정하였다. 

/app/Proviers/AppServiceProvider.php

[code]

    public function boot()

    {

        Vite::useScriptTagAttributes(fn (string $src, string $url, array|null $chunk, array|null $manifest) => [

            'async' => $src === 'resources/js/global.js' ? 'async' : true,

        ]);

    }

[/code]

html 에서 출력된 결과이다.

[code]

<script type="module" src="http://..../build/assets/global-ae95abc4.js" async="async"></script>

[/code]

async 로 먼저 정의 되고 난 후 Alpine.start() 가 구동되어서 잘 작동 되었다.