Table of contents

background

Will we encounter this import in our daily development, but there are two forms of import, which will be explained in detail below

1. import()

The import function can dynamically load modules asynchronously, and has no static link relationship with the loaded modules.
The return value of the import function is a promise object, and the .then and .catch methods can be used to process the received data. After the import() loads the module successfully, the module will be used as an object as a parameter of the then method.
You can use the syntax of object destructuring assignment to obtain the output interface. Allow module paths to be dynamically generated.
It can cooperate with the promise method.all method to load multiple modules.
The import function can be placed anywhere, because it is executed at runtime, when it is executed, the specified module will be loaded, so it can be dynamically loaded in conditional statements and functions.

//vue项目路由按需加载
{
    path:'/document'
    name:'document'
    component:()=>import(../document/index.vue)
    
}

//模块的按需加载
btn.click=function(){
    import('../document').then(fn=>{
        ...
    })
}

//条件加载
if(true){
    return import('./document/info').then(msg=>{
        //加载内容
    }).catch(err=>{
        //error codo
    })
}

The import statement is used in conjunction with export, the export command is used to specify the external interface of a module, and the import command is used to import bindings exported by another module. Both import and export can use the as keyword to rename the exported/imported variables.
The interface output by the export statement has a dynamic binding relationship with its corresponding value. There is a one-to-one correspondence between the interface name and the internal variables of the module. That is, the real-time value inside the module can be obtained through this interface. Export, like import, cannot appear in the block-level scope. It must be at the top level. The exported value cannot be accurate and must be an interface. There is no dynamic update of the exported interface.
The import command will be statically analyzed by the JavaScript engine, executed before other statements in the module, and loaded asynchronously. It can only be placed at the beginning of the module and cannot support conditional statements.
In a file or module, there can be multiple export and import, but only one export default
When export default exports an anonymous interface, import can give this anonymous interface any desired name.
export ...from ... can be imported first and then exported in a module

refer to my blog