optimmization: {
    splitChunks: {
        chunks: 'all'
    }
}

默认chunks配置成all意思就是不管是同步代码还是异步代码我都对它分片打包，假设我们没有配置chunks它默认的值是async也就是webpack它默认只对异步代码进行代码分割。

其实webpack希望达到的效果是，当你第一次访问页面的时候它的加载速度就是最快的。

那webpack真正希望你编写代码的方式是什么样子的呢！

webpack希望像这种交互（需要触发某个事件才会执行）的代码，应该把它放到一个异步加载的模块里面去写

// ./src/click.js
function handleClick() {
    const divDom = document.createElement('div');
    divDom.innerHTML = 'Hello, kay!';
    document.body.appendChild(divDom);
}
export default handleClick;

// ./src/main.js
document.addEventListener('click', () => {
    // 异步加载模块
    import(/* webpackPrefetch: true */'./click.js').then(({ default: handleClick }) => {
    handleClick();
    });
});

它的意思是当我点击click事件的时候它会帮我去加载click.js这个文件，当然呢它不是要非得等到你点击这个页面才去加载click.js这个文件，而是一旦发现你现在主要的js都加载完成之后，网络带宽有空闲的时候他会偷偷的把click.js文件预先加（下）载好。当你点击这个页面的时候其实还会去加载一下click.js这个打包后的文件，只不过这个文件已经在本地有缓存了，因为你之前已经加载过这个文件了，所以在你本地已经有缓存了，你会发现你再加载一下这个文件的时候就不是很多毫秒了而是变成短短的1毫秒，因为它可以充分的利用到你浏览器的缓存。或者Prefetch和Preload就是这样的一个功能，但是呢！Prefetch和Preload还是有一个区别！

疑问：Prefetch和Preload的区别在哪？
答：Prefetch会等待你的核心代码（主的流程）加载完成之后，页面带宽空闲的时候再去加载你Prefetch对应的文件。Preload它是和主的这个业务（main.js）文件一起去加载的

疑问1：在浏览器中如何看代码的使用率
答：开发者模式（F12）==> ctrl+shift+p ==>输入coverage ==> 点击原点的录制按钮

重点：在前端代码性能优化的时候，缓存并不是最重要的点，而最重要的点是代码覆盖率（code coverage）。