Vue项目打包性能分析、webpack-bundle-analyzer插件介绍

目录

一. 插件介绍

二. 详细参数配置说明 


一. 插件介绍

webpack-bundle-analyzer 是一个流行的 webpack 插件,用于可视化 webpack 输出的文件大小和组成。它帮助你理解各个模块如何贡献到最终的 bundle 大小,从而可以对 bundle 进行优化

 1. 安装插件

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

 2. 配置 webpack:在你的 配置文件中(通常是 webpack.config.js 或 vue.config.js),导入 BundleAnalyzerPlugin 并将其添加到 plugins 数组中。

  • vue.config.js方式
const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = defineConfig({

 ...

  configureWebpack: (config) => {
      return {
        plugins: [
         // 展示图形化信息
          new BundleAnalyzerPlugin({
            // analyzerMode: "static",
            // reportFilename: "report.html",
            // openAnalyzer: false, // 不自动打开浏览器
          }), // 使用默认配置
        ],
      };
  };

 ...
}); 
  • webpack.config.js方式
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  // ...你的其他 webpack 配置
  plugins: [
    new BundleAnalyzerPlugin({
      openAnalyzer: false, // 或者设置为 true 以在构建后自动打开报告
    }),
  ],
};

 配置完毕 , 运行 npm run build

在dist打包文件中会生成一个report.html文件

使用浏览器打开可以分析各个页面打包后的大小, 根据大体积模块进行进一步分析和优化

运行界面展示 ( 一个交互式的图表,显示了你的包的大小分布 )

二. 详细参数配置说明 

plugins: [
    new BundleAnalyzerPlugin({
        analyzerMode:'server', // 可以是 server、static、json、disabled。在server模式下,分析器将启动HTTP服务器来显示软件包报告。在“静态”模式下,会生成带有报告的单个HTML文件。在disabled模式下,你可以使用这个插件来将generateStatsFile设置为true来生成Webpack Stats JSON文件。
        analyzerHost: '127.0.0.1', // 将在“服务器”模式下使用的端口启动HTTP服务器
        analyzerPort: 8888, // 端口号
        reportFilename: 'report.html', // 路径捆绑,将在static模式下生成的报告文件。相对于捆绑输出目录
        defaultSizes: 'parsed', // 默认显示在报告中的模块大小匹配方式。应该是stat,parsed或者gzip中的一个
        openAnalyzer: false, // 在默认浏览器中是否自动打开报告,默认 true
        generateStatsFile: false, // 如果为true,则Webpack Stats JSON文件将在bundle输出目录中生成
        statsFilename: 'stats.json', // 相对于捆绑输出目录
        statsOptions: null, //stats.toJson()方法的选项。例如,您可以使用source:false选项排除统计文件中模块的来源。在这里查看更多选项:https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
        logLevel: 'info', // 日志级别,可以是info, warn, error, silent
        excludeAssets:null, // 用于排除分析一些文件
    })
]

猜你喜欢

转载自blog.csdn.net/m0_71071209/article/details/140457948