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

本文链接http://www.taodudu.cc/news/show-1782094.html