webpack 和 vite 如何使用BundleAnalyzerPlugin

`BundleAnalyzerPlugin` 是一个 Webpack 插件，用于生成可视化的打包报告。它分析 Webpack 的输出，展示各个模块的大小和依赖关系，帮助开发者识别和优化包的体积，提升性能。报告通常以交互式图表的形式呈现，便于理解和分析。

Webpack 使用 BundleAnalyzerPlugin

1. 安装插件

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

2. 在 `webpack.config.js` 中配置插件

 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
   module.exports = {
     // 其他配置...
     plugins: [
       new BundleAnalyzerPlugin({
         // 可选配置
         　　 analyzerMode: 'server', // 'server', 'static', 'disabled'
         　　 openAnalyzer: true, // 自动打开报告
       }),
     ],
   };

3. 运行构建，会自动生成包分析报告。

 Vite 使用 BundleAnalyzerPlugin

1. 安装插件：

 npm install --save-dev vite-plugin-bundle-analyzer

2. 在 `vite.config.js` 中配置插件：

 import { defineConfig } from 'vite';
   import { createBundleAnalyzerPlugin } from 'vite-plugin-bundle-analyzer';
   export default defineConfig({
     plugins: [
       createBundleAnalyzerPlugin({
         // 可选配置
         　　 openAnalyzer: true, // 自动打开报告
       }),
     ],
   });

3. 运行构建，会生成可视化的包分析报告。

两者的设置过程相似，都是安装插件并在配置文件中进行配置。Webpack 使用 `webpack-bundle-analyzer`，而 Vite 则使用 `vite-plugin-bundle-analyzer`。