webpack-懒加载和预加载

test.js

function(){
}

//正常加载可以认为是并行加载（同一时间加载多个文件）
index.js（懒加载）


console.log('index.js文件被加载了~’)；
//import{mul}from './test';
document.getElementById('btn').onclick=function(){
// 懒加载~：当文件需要加载时才加载~
///*webpackChunkName:'test' */设置是为了定义输出文件的名字同时进行代码分割
import(/*webpackChunkName:'test' */ './test').then(({mul})=>{
 console.log(mul(4,5))
})
}

index.js（预加载）兼容性差  慎用


console.log('index.js文件被加载了~’)；
//import{mul}from './test';
document.getElementById('btn').onclick=function(){
//预加载prefetch:会在使用之前，提前加载js问价
//预加载prefetch:等其他资源加载完毕，浏览器空闲了，再偷偷加载资源。
缺点：兼容性差。
import(/*webpackChunkName:'test',webpackPrefetch:true*/ './test').then(({mul})=>{
 console.log(mul(4,5))
})
}