打包可视化
使用webpack-bundle-analyzer插件可以对我们的打包结果可视化,通过观察生成的网页,如下所示:
![在这里插入图片描述](https://img-blog.csdnimg.cn/fbe5667d3dd6471bbab8c2b9aac51233.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAcmVuZGVyLXlkYg==,size_20,color_FFFFFF,t_70,g_se,x_16)
通过观察该网页我们可以得出:
- 打包文件都包含了什么;
- 每个文件在总体的占比;
- 模块之间的依赖关系;
- 每个文件Gzip后的大小。
其使用非常简单,在安装该插件以后,只需在Plugins中配置即可:
module.exports = {
plugins: [new BundleAnalyzerPlugin()]
}
如果你想获得更精细化的打包信息,比如modules,chunks,assets等的详细信息可以使用Webpack官方提供的webpack Analyse。