Open hxkuc opened 6 years ago
从上一篇文章来看,我们仅仅引入了vue和elementui打包后出来的js文件就接近2M了,显然文件太大了,为了弄清楚这个打包出来的js文件到底包含了哪些东西我们要借助几个工具查看一下
webpack有个--json参数用于生成json格式的包分析文件,打包的时候带上这个参数就可以了,如下 webpack --json > stats.json,然后在根目录下会生成一个stats.json文件,接下来我们打开这个网址https://alexkuz.github.io/webpack-chart/ 然后上传json文件就会看到类似下面的这个分析图表 从上图中我们可以看到打包的文件几乎都是node_modules中的文件主要分elementui,vue,elementui-css三大块,点击各个文件还可以看到详细的,例如我们看elementui 只有一个js就已经947kb了,而且还打包了一些其他的文件,在加上css文件和vue,我们算下来也差不多就这么大了,这个分析可能还不是很详细,接下来的可能会显示的更详细一点
webpack --json > stats.json
这个软件也是分析打包后的文件组成的便于以后优化包大小,使用起来也是相当简单,首先还是先安装 执行npm i -D webpack-bundle-analyzer, 然后在webpack.config.js中添加以下代码
npm i -D webpack-bundle-analyzer
let BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { plugins: [new BundleAnalyzerPlugin()] }
接下来打包,等待打包完成,浏览器会自动弹出一个页面,如下 这里我们就看的更详细到底打包了哪些文件
那么打包了这么一大堆文件,我们都用到了吗????,哪些用到了,哪些没用到呢?
从上一篇文章来看,我们仅仅引入了vue和elementui打包后出来的js文件就接近2M了,显然文件太大了,为了弄清楚这个打包出来的js文件到底包含了哪些东西我们要借助几个工具查看一下
--json命令
webpack有个--json参数用于生成json格式的包分析文件,打包的时候带上这个参数就可以了,如下
从上图中我们可以看到打包的文件几乎都是node_modules中的文件主要分elementui,vue,elementui-css三大块,点击各个文件还可以看到详细的,例如我们看elementui
只有一个js就已经947kb了,而且还打包了一些其他的文件,在加上css文件和vue,我们算下来也差不多就这么大了,这个分析可能还不是很详细,接下来的可能会显示的更详细一点
webpack --json > stats.json
,然后在根目录下会生成一个stats.json文件,接下来我们打开这个网址https://alexkuz.github.io/webpack-chart/ 然后上传json文件就会看到类似下面的这个分析图表webpack-bundle-analyzer
这个软件也是分析打包后的文件组成的便于以后优化包大小,使用起来也是相当简单,首先还是先安装 执行
npm i -D webpack-bundle-analyzer
, 然后在webpack.config.js中添加以下代码