Webpack：打包分析，preloading、prefetching（12）

介绍

使用webpack analyse分析打包是否合理，工具地址。prefetchinig可以让import的代码部分在主要js加载完成后再加载，部分浏览器有兼容问题需要注意。

分析使用

将–profile --json > stats.json命令放入package.json文件下scripts打包命令里。

"scripts": {
    "build": "webpack --profile --json > stats.json --config webpack.dev.js"
  }

运行打包命令，获得stats.json文件，然后上传分析

npm run build

更多分析工具见Code Splitting

prefetching

chrome技巧
使用ctrl+shift+p搜索show coverage可以查看打包的代码利用率。

当你看到大部分的网站代码利用率在30%多的时候，你就明白为什么webpack代码分割默认是aysn，因为只有这样才能提升最大的访问速度。

代码中使用
在引入js包的时候使用/* webpackPrefetch: true */，保证代码在主要js加载完成后再加载。

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

被引入的js代码

function handleClick(){
    const element = document.createElement('div')
    element.innerHTML = 'Jiang Hao'
    document.body.append(element)
}
export default handleClick

本文地址：https://blog.csdn.net/Aaren_Jiang/article/details/109260183