介绍
使用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