import() 动态引入

最新推荐文章于 2025-10-18 08:12:36 发布

原创最新推荐文章于 2025-10-18 08:12:36 发布 · 3.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #import

JavaScript 专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了JavaScript中的动态导入语法import()，包括如何在不同场景下使用，如延迟加载、路由懒加载和React组件的懒加载。通过import()，开发者可以按需加载模块，提高应用性能。示例展示了在setTimeout、路由配置和React组件中的用法。

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()