webpack4打包优化之可视化分析

能否对打包结果进行优化是webpack掌握水平的终极体现，要优化我们就要做到有的放矢，明确优化的目标，本篇博文介绍下怎么能够可视化的去分析当前打包的各项数据指标。

1.控制台信息

如上图给句chunks列表信息我们能够看到打包之后生成的打包文件信息，包括大小以及总的时间，但是这个太粗，我们在优化中更想知道每一个文件用时情况。而且最好能把每次打包结果分析数据保存以便与最后的样本分析以证明优化效果对比。

2.官方分析 webpack profile

通过打包命令：webpack --profile --json >stats.json
会在项目根目录下生成stats.json文件，记录了本次打包的各项数据记录。

注意这里生成的时候，webpack.config.js 文件中不要有console.log，打印信息,否则会加入到 stats.json文件中，从而造成 stats.json 文件错误官网会解析异常！

将头部标红处信息删除打开

官方网站webpack.github.io/analyse

选择上传刚才的stats.json文件

3.社区版本插件

安装 webpack-bundle-analyzer

webpack.config.js中引用

const webpackbunld=require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

plugins:[
    new webpackbunld(),
 ]

再次打包
浏览器会自动打开：