webpack 懒加载篇

prefetch 和 preload

1，prefetch 是父 chunk 加载完成后，再加载。preload chunk 在父 chunk 加载时，以并行方式加载。

2，prefetch 是在浏览器闲置网络空闲的时候加载，preload 和父 chunk 一起加载

@babel/plugin-syntax-dynamic-import

这是动态引入异步代码的插件，能够提高网络加载 JS 文件的代码使用率。举个栗子：

我们在 index.js 文件中写入下面的代码：

document.addEventListener('click ' ,function(){
    const element = document.createElement('div');
    element.innerHTML = 'welcome to webpack4.x';
    documen.body.appendChild(element)
} )

点击以后里面的代码是异步执行的，也就是在加载的首屏的时候，实际上有很多代码是没有触发的，只有当用户进行某种操作后，才会触发，那么这些代码就可以通过在 webpack 里面配置插件进行优化。

优化方式如下：

我们可以把function 抽取出来放到单独的文件export 出来，然后再在 index.js 文件中引入：

//click.js

function handleClick(){
    const element = document.createElement('div');
    element.innerHTML = 'welcome to webpack4.x';
    documen.body.appendChild(element)
}
export default handleClick;

document.addEventListener('click ' ,function(){
    import( ' ./click.js ' ).then(({default:func}))=>{
        func()
    }
} )

如此操作后我们可以通过打开浏览器检查，点击 network，找到 coverage 以后，点击执行可以明显看到打包后的 JS 代码使用率提高了。

那么这种方式可能会导致一个问题，可能用户触发在某个异步加载的模块上的时候白屏，那么我们这时候就需要预加载，意思就是首屏加载后我们悄悄加载异步的模块，配置只需要在异步模块上添加代码如下：

document.addEventListener('click ' ,function(){
    import( /* webpackPrefetch: true */ ' ./click.js ' ).then(({default:func}))=>{
        func()
    }
} )

/* webpackPrefetch: true */ 这段代码会生成

<link rel='prefetch ' href='xxx-chunk.js ' > 

并且追加到页面头部，提示着浏览器在闲置时间预取xxx-chunk.js 文件。