Prefetch,Preload

默认设置是async

1 .一般我们都是将splitChunks.chunks字段打包成all,可以同时对同步和异步代码进行分割，将loadsh,jquery等代码单独分割为一个包文件，第一次加载之后，再次访问就可以使用浏览器缓存来调速度
2 .但是
3 .缓存只能提高第二次访问这个网站的速度，并不能真正的进行页面性能访问优化，webpack希望做的事第一次访问页面就是最快的

提高核心代码利用率

1 .将所有交互之后才会用到的代码都封装到一个文件中，需要执行的时候在加载进来
2 .但是这样每次写的时候不是很麻烦吗？

// 将点击的回调方法封装进 click.js
function handleClick() { 
  const element = document.createElement('div');
    element.innerHTML = 'Bingo!!!';
    document.body.appendChild(element);
}
export default handleClick;
// index.js
document.addEventListener('click', () => {
    // 这里通过 default 来拿到导出的方法后重命名为 func
    import('./click.js').then(({default: func}) => {
        func();
    })
})


<!--index.js-->
//推荐写法：异步导入的方式可以提高代码的使用率，可以在浏览器控制面板Coverage看到使用率提高
document.addEventListener('click', () => {
  import(/*webpackPrefetch: true */ './loadsh').then(({default: _}) => {
    _()
  })
})
//这样是可以不点击的情况也会自动在空闲的时候fetch代码么？

3 .因此他认为做前端性能优化的时候，最重要的不是缓存，而是代码覆盖率，一定要通过提高页面核心代码的覆盖率和使用率，提升代码性能和页面加载速度
4 .预加载

import(/* webpackPrefetch: true */ './click.js').then(({default: func}) => {
        func();
    })
1 .他会等待页面核心代码加载完成之后，浏览器带宽闲置的时候自动去加载prefetch对应的文件

5 .Preload是会和主线程一起去加载代码，所以可能会有相反的效果

打包分析

1 .webpack策划的是代码的使用率而不是缓存，使用最大缓存的优化意义其实是不大的
2 .通过异步的方式提高代码的使用率才能比较大程度的提高网站性能，缓存只能加快第二次之后页面的加载速度，而webpack想做的是第一次就很快
3 .