- 다이나믹 import를 이용해 여러 모듈 파일을 비동기로 로드

- 소스 수정후 브라우저 캐쉬 기능 때문에 변경내용이 반영되지 않는 문제 해결

 

 

//==================================== 
// vc_js2.php

<!DOCTYPE html>
<html>

<head>
    <script src="https://unpkg.com/vue"></script>
</head>

<body>
    <div id="app">
        <vc-obj1></vc-obj1>
        <vc-obj2></vc-obj2>
        <vc-obj3></vc-obj3>

    </div>
    <script type="module" src="./vc_js_app2.js?v=<?=filemtime('./vc_js_app2.js')?>"></script>
</body>

</html>
<script>
    
    //impoert 된 모든 개체를 하나의 개체로 만듬
    function getImportedObj(imported) {
        let comps = {}
        Object.entries(imported).forEach(
            ([name, val]) => {
                //window[name] = val
                //console.log(name, val);
                if (name === 'default') {
                    Object.assign(comps, getImportedObj(val));
                } else {
                    comps[name] = imported[name];
                }
            }
        );
        //console.log(comps);
        return comps;
    }

    //변경된 시간을 구분자 없는 문자열로 변경
    function getModifyTime(time = document.lastModified) {
        return time.split(/[\s/:]/).join('');
    }
</script>


//=================================================== 
// vc_js_app2.js

var aFiles = [
    `./vc_js.js?v=${getModifyTime()}`,
    `./vc_js3.js?v=${getModifyTime()}`,
];

var prms = [];
aFiles.map((val) => {
    prms.push(import(val));
})

Promise.all(prms)
    .then(ret => {
        var comps = {};
        ret.map((val) => {
            Object.assign(comps, getImportedObj(val));
        })
        return comps;

    })
    .then(ret => {
        window.vue0 = new Vue({
            el: '#app',
            components: ret,
        });

    })



//============================ 
// vc_js.js

export default {
    /* 
    //1개만 내보낼때
    template: `<div><p>{{ message }}</p></div>`,
    data() {
      return {
        message: 'component - 0'
      }
    } */

    //여러개 내보낼 경우
    vcObj1: {
        template: `<div><p>{{ message }}</p></div>`,
        data() {
            return {
                message: 'component - 1'
            }
        }
    }
}

//
var vcObj2 = {
    template: `<div><p>{{ message }}</p></div>`,
    data() {
        return {
            message: 'component - 2'
        }
    }
}

export {
    vcObj2
}

//===========================

// vc_js3.js

export var vcObj3 = {
    template: `<div><p>{{ message }}</p></div>`,
    data() {
      return {
        message: 'component - 3'
      }
    }
}

 

Posted by 코덴스

댓글을 달아 주세요