webpack的懒加载和预加载详解（webpack按需加载）

console.log('index.js执行了')
import { test } from './test.js'
document.getElementById('btn-wrap').onclick = function () {
    test()
}

console.log('test.js执行了')
export function test() {
    const value = 'hello world'
    console.log('test value: ', value)
}

    <button id='btn-wrap'>点击</button>

console.log('index.js执行了')
// import { test } from './test.js'
// document.getElementById('btn-wrap').onclick = function () {
//     test()
// }
document.getElementById('btn-wrap').onclick = function () {
    console.log('====  点击按钮')
    import(/*webpackChunkName:'test' */"./test")
        .then(({test}) => {
            console.log('test加载成功')
            test()
        })
        .catch(error => {
            console.log('test加载失败 error:', error)
        })
}

document.getElementById('btn-wrap').onclick = function () {
    console.log('====  点击按钮')
    import(/*webpackChunkName:'test' ,webpackPrefetch:true*/"./test")
        .then(({test}) => {
            console.log('test加载成功')
            test()
        })
        .catch(error => {
            console.log('test加载失败 error:', error)
        })
}