import() 返回一个 Promise 对象, 返回的 Promise 的 then 成功回调中,可以获取模块的加载成功信息。 import() 的使用:
fn_handle.js
setTimeout(() => {
const result = import('./fn_data.js')
result.then(res => {
console.log(res)
})
}, 0);
fn_data.js
export const name = '张三'
export const age = 18
export default function say() {
console.log('nice to meet you')
}
结果为:
import() 可以动态使用,name 对应 name 属性, default 代表 export default
import()的用法:
1.动态加载
const res = import('./fn_data.js')
2.路由懒加载
[
{
path: 'home',
name: '首页',
component: ()=> import('./home') ,
},
]
3.React中动态加载
const LazyComponent = React.lazy(()=>import('./text'))
class index extends React.Component{
render(){
return <React.Suspense fallback={ <div className="icon"><SyncOutlinespin/></div> } >
<LazyComponent />
</React.Suspense>
}
React.lazy 接受一个函数,这个函数需要动态调用 import()