打包分析
package.json
使用analyse：
添加--profile --json > stats.json参数，意为将打包过程的描述放在stats.json文件中。
通过这个文件，我们可以借助一些网站进行分析。
"dev-analyse": "webpack --profile --json > stats.json --config ./build/webpack.dev.js"
分析网站：
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
预加载
/* webpackPrefetch: true */：等主代码加载完成后，预加载引入的异步代码，而不是等到异步代码触发后再去加载。等到异步代码触发时，会再次加载，但此时缓存中已经加载过了，所以执行效率会很高。
关于性能优化，提倡多写异步代码，提高代码使用率，而不是从缓存入手。
// 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、打开开发者工具F12
2、windows： ctrl+shift+p
mac： command+shift+p
3、选择show coverage选项
文档
code-splitting/#bundle-analysis
