性能优化 - 查看 webpack 打包后所有的依赖关系（webpack 可视化工具 webpack-bundle-analyzer）

摘要： 很多程序猿只知道用 webpack 打包，却不知道每个文件具体打包了哪些东西，本篇文章就是介绍一个 webpack 可视化工具 webpack-bundle-analyzer ，将...

很多程序猿只知道用 webpack 打包，却不知道每个文件具体打包了哪些东西，本篇文章就是介绍一个 webpack 可视化工具 webpack-bundle-analyzer ，将捆绑内容表示为方便的交互式可缩放树形图，让你明白你所构建包中真正引入的内容，我们可以借助她，发现它大体有哪些模块组成，找到不合时宜的存在，然后优化它。效果如下图：

插件功能：

• 每个文件包含的所有模块及其所占大小

• 找出错误模块

• 缩小捆绑

安装：

npm install --save-dev webpack-bundle-analyzer

在webpack.config.js中添加：

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

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

在 package.json 中添加：

"analyze": "NODE_ENV=production npm_config_report=true npm run build"

启动服务：

生产环境查看：npm run build --report 或 正常build 即可启动查看器

开发环境查看：webpack -p --progress 或启动正常devServer服务即可启动查看器!

显示：

然后默认打开一个 http://127.0.0.1:8888/  的网站。