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))
})
}