ribbon image search rewind fast-forward speech-bubble pie-graph star

使用 webpack-visualizer 进行打包模块分析

我们现在已经非常习惯使用 Webpack 进行 JS 模块的打包处理。当然有的时候我们在优化代码的时候需要对所引用的模块进行体积分析,从而进行代码优化。当然这些工具有很多了,今天主要说下 webpack-visualizer

webpack-visualizer 是一款 webpack模块分析插件,使用非常简单,你只需要:

npm install webpack-visualizer-plugin --save-dev  

然后编辑你的 webpack 配置文件:

var Visualizer = require('webpack-visualizer-plugin');

//...
plugins: [new Visualizer({  
  filename: './statistics.html'
})],
//...

然后打包的时候会在 打包目录下生产一个静态网页 statistics.html.打开你就可以看到各个模块的百分比,以及压缩包大小了。

You Can Speak "Hi" to Me in Those Ways