利用分塊打包,把公共模塊和業務模塊分開打包,可以提高加載速度,也可以利用緩存提高第二次訪問頁面的加載速度。這么提高性能非常有限,我們應該盡量的提高代碼的利用率,當代碼用到的時候再去加載。比如說:可以把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,可以看待各個文件的代碼利用率。