如何理解JavaScript模块化

function Test1(){
    console.log("这是默认导出")
}
function Test2(){
    console.log('这是命名导出')
}
export default Test1

function Test1(){
    console.log("这是默认导出")
}
function Test2(){
    console.log('这是命名导出')
}
export {Test1, Test2}

import Test1 from "./model.js"
Test1()

import x from "./model.js"//x就是默认导出的Test1
x()

import {Test1, Test2} from "./model.js"
Test1();
Test2();

import {Test1 as x1, Test2 as x2} from "./model.js"
x1();
x2();

function Test1(){
    console.log("这是默认导出")
}
function Test2(){
    console.log('这是命名导出')
}
export {Test1 as x1, Test2 as x2}

<script src="main.js"></script>

import * as Model from "./model.js"
Model.x1();
Model.x2();

function Test1(){
    console.log("这是子模块1")
}
export {Test1}

function Test2(){
    console.log('这是子模块2')
}
export {Test2}

export {Test1} from "./models/model.js"
export {Test2} from "./models/model2.js"

import * as Model from "./redirection.js"
Model.Test1()
Model.Test2()

<script src="./main.js"></script>

function TestDy(){
    console.log("这是动态模块")
}
export default TestDy

document.querySelector('.load').onclick = function(){
    import('./dynamic.js').then((Model)=>{
        Model.default()
    })
}