[Javascript] 스크립트 파일 (나중에) 참조(include)하기.(feat. Ajax)

페이지를 개발 할 때, 아래처럼 미리 참조해야 하는 파일들을 참조한다.

<!-- .Net Core Script Include Version -->
<script src="~/common/common.js" asp-append-version="true"></script>

개발을 하면서 이런 생각을 했다.

사용자가 해당 페이지를 사용했을 때, 참조한 모든 파일들을 사용할까?

사용하지 않은 파일들을 참조할  필요가 있을까?

그리고 만약 참조하지 않은 파일들을 사용할 때, 참조하면 되는거 아닌가?

 

그래서 이래저래 찾아봤더니, Ajax를 이용하여 스크립트 파일을 참조할 수 있는 것을 알아냈다.

$.ajax({
    url: "참조해야하는 파일 주소",
    async: false,
    method: "GET",
    contentType: "application/javascript",
    dataType: "script",
    data: null
});

나같은 경우에는 해당 Ajax함수를 공용 함수에 설정해두고,

처음 페이지 로드할때 필요하지 않은 스크립트 파일에 대해서는 해당 스크립트가 처음 사용할때 해당 Ajax함수를 호출하여 스크립트 파일을 가져와서 참조한다.

 

페이지 처음 로드 될 때, 불필요한 스크립트 참조를 최소화하여 사용자로 하여금 페이지 로딩을 빠르게 해주는 것이 내가 이 것을 사용하는 이유가 아닐까 싶다.