用webpackPrefetch:true提升性能

利用分块打包,把公共模块和业务模块分开打包,可以提高加载速度,也可以利用缓存提高第二次访问页面的加载速度。这么提高性能非常有限,我们应该尽量的提高代码的利用率,当代码用到的时候再去加载。比如说:可以把onClike后才执行的放到click.js文件里,当onClike事件发生后,再去异步加载click.js文件。
但是这样有个问题就是用户体验可能会比较差,这时候,我们可以使用prefeach来解决。

function handleClick() {
  //使用魔法注释/*webpackPrefetch:true*/,可以在网络空闲的时候去加载click.js,而不是必须要等调用handleClick的时候才去加载
  return import(/*webpackPrefetch:true*/'./click.js').then(() => {
   ...
  })
}

扩展:
怎么查看代码利用率
command+shift+p 快捷键 打开命令行,输入coverage,可以看待各个文件的代码利用率。

posted @ 2020-09-07 11:44  哥哦狗子  阅读(1652)  评论(0编辑  收藏  举报