从上一篇文章来看，我们仅仅引入了vue和elementui打包后出来的js文件就接近2M了，显然文件太大了，为了弄清楚这个打包出来的js文件到底包含了哪些东西我们要借助几个工具查看一下

--json命令

webpack有个--json参数用于生成json格式的包分析文件，打包的时候带上这个参数就可以了，如下 webpack --json > stats.json，然后在根目录下会生成一个stats.json文件，接下来我们打开这个网址https://alexkuz.github.io/webpack-chart/ 然后上传json文件就会看到类似下面的这个分析图表从上图中我们可以看到打包的文件几乎都是node_modules中的文件主要分elementui，vue，elementui-css三大块，点击各个文件还可以看到详细的，例如我们看elementui qq 20180411231640 只有一个js就已经947kb了，而且还打包了一些其他的文件，在加上css文件和vue，我们算下来也差不多就这么大了，这个分析可能还不是很详细，接下来的可能会显示的更详细一点

webpack-bundle-analyzer

这个软件也是分析打包后的文件组成的便于以后优化包大小，使用起来也是相当简单，首先还是先安装执行npm i -D webpack-bundle-analyzer，然后在webpack.config.js中添加以下代码

let BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    plugins: [new BundleAnalyzerPlugin()]
}

接下来打包，等待打包完成，浏览器会自动弹出一个页面，如下这里我们就看的更详细到底打包了哪些文件

hxkuc / webpack

webpack4爬坑之路----打包文件的可视化分析 #4

--json命令

webpack-bundle-analyzer