반응형

참조 사이트

 

ㅡ   2024-07-18 갱신

ㅡ   큰 파일 하나 캐싱하는게 빠를수도 있다는데 동적로딩 하는 이유

                : 매 페이지마다 필요없는 내용이 있는 스크립트, CSS를 불러들인다는것이 싫어요

ㅡ   최신문법으로 async, import()문을 사용하라고 하는데 아직 성공해보지는 못함

ㅡ   data.js 대신에 빈 파일 읽어들여 스크립트 로딩 제거하려했으나 성공해보지는 못함

ㅡ  성능 최적화를 위해서는 큰 파일 1번이 좋다고 하는데...

 

ㅡ jquery : $.getScript()  :  성공 / 간단

 

 

ㅡ   웹 페이지 성능 최적화 : 큰 스크립트 파일 vs 작은 파일 다수
    1.  캐시 이점
            큰 스크립트 파일을 캐싱하면, 한 번 다운로드하고 캐시된 파일을 사용하기 때문에 네트워크 대역폭과 시간을 절약할 수 있습니다.
            작은 파일 5개를 매번 다운로드하는 것보다 효율적입니다.
    2.  파일 개수와 네트워크 오버헤드
            작은 스크립트 파일을 다운로드하면,  파일을 다운로드하는 동안에는 네트워크 연결 및 HTTP 요청/응답 오버헤드가 발생합니다.
            큰 파일 하나를 다운로드하는 것은 작은 파일 5개를 다운로드하는 것보다 더 효율적이며, 오버헤드를 줄일 수 있습니다.
    3. 브라우저 병렬 다운로드
            큰 스크립트 파일을 캐싱하면,  브라우저는 여러 개의 리소스를 병렬로 다운로드합니다.
            큰 파일 하나를 다운로드하는 동안 다른 리소스도 병렬로 로딩될 수 있어 전체 페이지 로딩 시간이 단축될 수 있습니다.


ㅡ   대안 # 1 : 웹팩 코드 분할(Code Splitting)
            웹팩은 코드 분할을 통해 필요한 부분만 로드하는 방식을 지원합니다.

            이를 통해 초기 로드 시 필요하지 않은 코드는 로드되지 않고, 필요한 시점에 동적으로 로드됩니다.

            예를 들어, 특정 페이지나 사용자 상호작용에 의해 필요한 경우에만 특정 코드 조각(예: 추가적인 자바스크립트 파일)을 로드할 수 있습니다.

ㅡ   대안 # 2 : 레이지 로딩(Lazy Loading)
            이는 코드 분할의 한 형태로, 사용자가 실제로 필요로 할 때까지 특정 모듈의 로딩을 지연시키는 기술입니다.

            예를 들어, 특정 버튼을 클릭할 때만 해당 기능의 스크립트를 로드하는 방식입니다.

 


ㅡ    실제 사용예  : 개인적으로 1개 디렉토리 단위로 CSS, JS, HTML, PHP 파일을 저장했음

           /common/function.php

           /common/function.js

 

           /employee/employee.class.php

           /employee/employee.css
           /employee/employee.js
           /employee/employee.php

           /employee/employee.html ( 웹디가 백엔드 코드까지 보게 하는걸 안 좋아함 )

 

            scrFn_loadScript('employee.js','')

 

기본 예제  파일

ㅡ   index.html

<!doctype html>
<html lang="ko">

<head>
    <meta charset="utf-8">
</head>
<script>
    function firstFunction() {
        alert("시작부터 로딩되었던 스크립트 함수");
    }
</script>

<!-- 동적로딩 시키는 스크립트 함수가 있는 파일 -->
<script type="text/javascript" src="loading.js"></script>

<script>
    function isFirst() {
        // data.js 에 있는 is_datajs 함수가 존재하는지 여부로 중복로딩을 차단한다
        if (typeof is_datajs == 'undefined') { // data.js 동적로딩한적 없음
            return true;
        }
        alert('외부함수가 로딩되어 있습니다')
    }

    // data.js 를 동적로딩한다, callback 을 사용하지 않을경우
    function loading() {
        if (isFirst() == true) {
            alert('외부 스크립트 파일을 동적으로 읽어들입니다')
            scrFn_loadScript('data.js')
        }
    }

    // data.js 를 동적로딩한다, callback 을 사용할 경우
    function loading_callback() {
        if (isFirst() == true) {
            alert('외부 스크립트 파일을 동적으로 읽어들입니다')
            scrFn_loadScript('data.js', call_comeplete);
        }
    }

    // 로딩후 콜백
    function call_comeplete() {
        alert("동적 로딩을 완료하고 콜백합니다");
    }

    // 외부 함수 존재하는지 체크 방법
    function callFunction() {
        if (typeof outerFunction != 'undefined') {
            outerFunction();
        } else {
            alert('외부 함수가 없습니다')
        }
    }
</script>

<body>

    <input type=button onclick='firstFunction()' value='처음 함수 확인'><br /><br />
    <input type=button onclick="callFunction();" value='외부 자바스크립트파일 호출'><br /><br />
    <input type=button onclick="loading();" value='동적로딩하기'><br /><br />
    <input type=button onclick="loading_callback();" value='동적로딩하고 콜백하기'>

</body>

</html>



ㅡ   lodading.js

function scrFn_loadScript(url, callback, charset='UTF-8')
{
    // <head> 를 찾음
    var head = document.getElementsByTagName('head')[0];
    
    // script 라는 Element를 만듦
    var script = document.createElement('script');
    
    script.type = 'text/javascript';
    script.charset = charset;
    
    var loaded = false;

    // Firefox, Chrome 등, script.onload를 이용해서 로딩 완료 여부를 확인한다.
    script.onload = function ()
    {
        if (callback)
        {
            callback();
        }
    }
    
    // 스크립트 경로 지정
    script.src = url;
    
    // <head>에 script 추가
    head.appendChild(script);
}



ㅡ   data.js

//처음 로딩인지 체크
function is_datajs(){
    console.log('script loaded...')
    }

function outerFunction(){
alert("나는 외부 javascript 파일입니다");
}



* 동적 로딩 함수를 여러번 호출해도 1번만 로딩된다, 

* 여러번 호출하면 계속 소스에 javascript 누적이 됨 (함수 호출 오류는 발생 안함)
* typeof 로 외부 함수가 메모리에 존재하는지 체크해서 중복 로딩 차단
* 동적로딩은 HTML 상에서 로딩해야 함... 서버쪽에서 echo 로 출력하면 로딩이 안됨
<?PHP echo ("<script type='text/javascript' src='loading.js'></script>"); ?>

 

 

 

● JQuery getScript()

function scrFn_linkOpen(url, params = {}) {
    
    // URL을 "/_admin/{url}.ajax.php" 형식으로 변경
    url = "/_admin/" + url + ".ajax.php";
    
    // JS 파일 경로를 추출
    var jsFile = url.replace('.ajax.php', '.js');
    
    // JS 파일 로드
    $.getScript(jsFile)
        .done(function(script, textStatus) {
            // 스크립트 로드 성공 시 메시지 출력
            console.log("Script loaded successfully");
        })
        .fail(function(jqxhr, settings, exception) {
            // 스크립트 로드 실패 시 오류 메시지 출력
            console.error("Failed to load script: " + jsFile);
        });

    // AJAX 요청
    $.ajax({
        url: url, // 요청할 URL
        type: "GET", // 요청 타입 (GET)
        data: params, // 요청에 사용할 데이터 
        success: function(response) {
            
            // 요청 성공 시, ".content" 클래스 요소에 응답 HTML 삽입
            $(".content").html(response);

        },
        error: function(xhr, status, error) {
            // 요청 실패 시, 오류 메시지 출력
            console.error("AJAX 오류 발생: " + error);
        }
    });
}
반응형

'자바스크립트' 카테고리의 다른 글

NODEJS, DENO, BUN 설치  (1) 2024.11.20
동영상 플레이 썸네일 + 자동 플레이  (0) 2024.07.18
자바스크립트 날짜 비교하기  (1) 2024.02.27
* javascript datetime / 자바스크립트 년월일 구하기  (0) 2022.04.04
module.exports 스타일  (0) 2020.11.16

티스토리툴바