一、首先，之前我们做的所谓的代码分割，对于同步代码，仅仅只能利用浏览器的缓存；并不能提高第一次访问页面的速度，只有当第二次打开页面的时候，我们使用的是浏览器中的缓存中的第三方模块的代码，但是这并不能解决我们页面访问速度的问题；
真正能解决页面访问速度的是代码的利用率，提高代码利用率的最好的方法就是编写异步的代码，因此webpack中的代码分割其实默认配置是针对异步代码的编写方式；
二、怎么样才能提高代码的利用率，思想就是，只加载页面初始化需要使用的代码，页面加载完成以后才使用的代码通过异步加载的方式去实现；
举个例子：
document.addEventListener('click', function () {
var element = document.createElement('div');
element.innerHTML = 'Dell Lee';
document.body.appendChild(element);
})
在某个页面的业务代码中有上面的这么一行代码，首先除了绑定点击事件，事件中的多行代码对于页面加载不是必须的，所以在页面第一次加载的时候，绑定点击事件的这段代码就不需要加载，这里仅仅是几行，如果是几百行、几千行或者多个点击事件就会对页面的加载产生较大的影响，为了解决这个问题，我们编写代码的时候建议使用异步代码的编写方式：
（1）将点击事件中的代码抽离到click.js（名字自己定义）中
function handleClick){
var element = document.createElement('div');
element.innerHTML = 'Dell Lee';
document.body.appendChild(element);
}
export default handleClick;
（2）在业务代码的点击事件中导入点击事件需要的代码：
document.addEventListener('click', function () {
import('./click.js').then(({default:func})={
func()
})
})
这时，点击事件中的异步代码在页面首次加载的时候就不会去执行，只有当我们点击的时候才会加载，这样就不会影响页面加载的效率；
二、那么问题又来了，你这样做不会导致点击事件执行的时候有卡顿吗，当异步加载的代码比较多的时候很可能会出现这个问题，怎么解决哪？
我们可以在首页加载完以后，网络空闲下来了，再去加载这段异步代码，想法是可以，怎么实现哪？我们就要用到 魔法注释 和Prefetching了；
document.addEventListener('click', function () {
import(/* webpackPrefetch:true */'./click.js').then(({default:func})={
func()
})
})
这时，当页面加载完成以后，网络已经闲置下来了，可以在后台再去加载其他的代码；这样就做到了既不影响首页的加载，也不影响其他功能；