es6 动态import 实现按需加载

动态import

es6 import 文档
关键字import可以像调用函数一样来动态的导入模块。以这种方式调用,将返回一个 promise

import('./hello.js').then(module=>{
   // module 就是模块里面导出的对象
})

示例

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态import </title>
</head>
<body>
    <button id="btn">点击</button>
    <script src="./js/app.js" type="module"></script>
</body>
</html>

/js/hello.js

export function hello(){
    console.log('hello')
}

/js/app.js

// 静态导入  不管用不用 先导入再说
// import * as m1 from './hello.js'

const btn = document.querySelector("#btn")
btn.onclick = function(){
    // 动态导入
    import('./hello.js').then(module=>{
        // module 就是模块里面导出的对象
        module.hello()
    })
}

你可能感兴趣的:(es6)