webpack-懒加载和预加载

 正常加载

 

为了看的方便，index.js中的代码非常简单

console.log('index.js执行了')

import { test } from './test.js'


document.getElementById('btn-wrap').onclick = function () {
    test()
}

test.js

console.log('test.js执行了')

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

在index.html中添加按钮

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

 执行webpack命令：

可以看到没有点击按钮时，test.js就已经加载了 。如果test.js比较大，加载比较耗性能。我们就希望能在需要使用的时候在加载

懒加载

修改index.js中的代码

console.log('index.js执行了')

// import { test } from './test.js'

// document.getElementById('btn-wrap').onclick = fu