webpack打包分析和异步代码预加载懒加载

打包分析

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

网站导航

网站导航