交互式可视化 webpack 打包性能分析插件 Webpack Bundle Analyzer

如图所示今天给大家推荐的是一款可视化的webpack打包分析插件 webpack bundle analyzer

 使用方法

1. 执行命令 npm install --save-dev webpack-bundle-analyzer 安装插件

2.在webpack.config.js文件中添加如下代码 

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

module.exports = {

  plugins: [

    new BundleAnalyzerPlugin()

  ]

}

在执行 webpack打包的时候 本地会开启一个网页 显示 具体的每个模块的大小 等等信息 方便进行更好的优化模块大小