Webpack：打包分析，preloading、prefetching（12）
- 作者: 骚年要恋爱
- 来源: 51数据库
- 2021-08-03
介绍
使用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
推荐阅读
