webpack 之(19) 优化配置 之 懒加载和预加载

 

懒加载和预加载有什么区别的吗?

懒加载,是在进入这个方法时才加载,文件test进行第一次加载并执行里面的代码

预加载:会在使用之前加载js文件(js文件先加载了,但是并不会去执行代码)

    当点击按钮进入该方法时,加载的是该文件的缓存,同时去执行test文件的内容

正常加载: 可以认为是并行加载(同一时间加载多个文件)

index.js文件内容

console.log('index.js 文件被加载了')

document.getElementById('btn').onclick= function(){
    //懒加载~:当文件需要使用时才加载
    //import(/*webpackChunkName:'test'*/'./test')
    //预加载 prefetch: 会在使用之前,提前加载js文件
    import(/*webpackChunkName:'test' ,webpackPrefetch:true */'./test')
}

test.js
console.log('test.js文件被加载了')