webpack打包可视化分析之--webpack-bundle-analyzer

在开发一些项目的时候，有时候有些旧的框架项目用的webpacke打包慢，打包出来的包文件大，然而我们想要对它进行优化分析，有些旧的项目可能在不断迭代的过程中，有些模块功能改造或者有些需求变化，有些新需求模块开发测试完后，后面旧的模块功能有些不用等需要注释或者删掉，但是由于多人协作和历史版本迭代，有些依赖也可能没删除等，此时我们想对项目做一次比较系统的打包优化分析，我们需要一些可视化插件去帮助我们优化，此时可以用什么呢？下面推荐一个webpack-bundle-analyzer 插件

一、webpack-bundle-analyzer 插件是什么？

        webpack-bundle-analyzer 插件是一个用于可视化分析 webpack 打包后的 bundle 文件的工具。它可以以交互式的图形界面展示 bundle 文件的大小、模块依赖关系、模块引用次数等信息，帮助开发者快速定位并优化项目中的体积过大或冗余的模块，从而提高项目的性能和加载速度。使用 webpack-bundle-analyzer 插件可以更直观地理解打包后的 bundle 文件结构，帮助开发者做出更好的优化决策。

二、有什么优点？

        1、可视化分析：可以生成可视化的报告，以帮助开发人员直观地了解打包后的文件大小、模块依赖关系等信息。这使得开发人员可以更好地优化打包体积，提高应用程序的性能。

        2、灵活性：提供了多种查看报告的方式，包括饼图、树状图和矩形图等，开发人员可以根据自己的需求选择最适合的视图。

        3、定位问题模块：可以标记出大体积模块，让开发人员能够快速定位到可能存在问题的地方，并进行优化。

        4、提供优化建议：可以分析打包后的文件，给出优化建议，例如识别重复模块、未使用的模块等，帮助开发人员进一步提升应用程序的性能。

        5、易于使用：webpack-bundle-analyzer 插件可以很容易地与 Webpack 集成，并提供了简洁明了的命令行界面和配置选项。它还可以与其他优化插件配合使用，如 Tree Shaking、代码拆分等，使得优化过程更加灵活和高效。

三、如何安装？

1、yarn 或者npm 安装

   （1）yarn 

  （2）npm

2、webpack 配置文件中添加配置 

3、运行分析

    重新执行编译打包命令运行，插件将会自动启动并生成一个可视化报告

4、根据分析.js优化

     你已经成功安装并配置了 webpack-bundle-analyzer 插件。通过分析报告，你可以了解到你的打包文件的大小、组成以及依赖关系等信息，以便进行优化和调试。