打包分析
package.json
使用analyse：
添加--profile --json > stats.json參數(shù)鉴吹，意為將打包過程的描述放在stats.json文件中。
通過這個文件券册，我們可以借助一些網(wǎng)站進行分析重斑。
"dev-analyse": "webpack --profile --json > stats.json --config ./build/webpack.dev.js"
分析網(wǎng)站：
1、http://webpack.github.io/analyse/
2辆影、https://alexkuz.github.io/webpack-chart/
3良狈、https://chrisbateman.github.io/webpack-visualizer/
4舆绎、https://github.com/webpack-contrib/webpack-bundle-analyzer
5、https://webpack.jakoblind.no/optimize/
6们颜、https://github.com/bundle-stats/bundle-stats
預(yù)加載
/* webpackPrefetch: true */：等主代碼加載完成后吕朵，預(yù)加載引入的異步代碼，而不是等到異步代碼觸發(fā)后再去加載窥突。等到異步代碼觸發(fā)時努溃，會再次加載，但此時緩存中已經(jīng)加載過了阻问，所以執(zhí)行效率會很高梧税。
關(guān)于性能優(yōu)化，提倡多寫異步代碼，提高代碼使用率第队，而不是從緩存入手哮塞。
// click.js
function handleClick() {
const element = document.createElement('div');
element.innerHTML = 'Dell Lee';
document.body.appendChild(element);
}
export default handleClick;
// index.js
document.addEventListener('click', () =>{
import(/* webpackPrefetch: true */ './click.js').then(({default: func}) => {
func();
})
});
代碼使用率
1、打開開發(fā)者工具F12
2凳谦、windows： ctrl+shift+p
mac： command+shift+p
3忆畅、選擇show coverage選項
文檔
code-splitting/#bundle-analysis
