webpackbundleanalyzer 插件配置使用方法

目录

• 一、webpack-bundle-analyzer 是什么？
• 二、安装
• 三、使用方法
• 1. 作为插件使用
• 2. 作为CLI的一个工具
• 参考文章：

一、webpack-bundle-analyzer 是什么？

webpack-bundle-analyzer 是 webpack 的插件，需要配合 webpack 和 webpack-cli 一起使用。这个插件可以读取输出文件夹（通常是 dist）中的 stats.json 文件，把该文件可视化展现，生成代码分析报告，可以直观地分析打包出的文件有哪些，及它们的大小、占比情况、各文件 Gzipped 后的大小、模块包含关系、依赖项等，对应做出优化，从而帮助提升代码质量和网站性能。

二、安装

# NPM 
npm install --save-dev webpack-bundle-analyzer
# Yarn 
yarn add -D webpack-bundle-analyzer

三、使用方法

1. 作为插件使用

1. 配置 webpack.config.js 文件：

// webpack.config.js 文件
 
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
  plugins: [
    new BundleAnalyzerPlugin()  // 使用默认配置
    // 默认配置的具体配置项
    // new BundleAnalyzerPlugin({
    //   analyzerMode: 'server',
    //   analyzerHost: '127.0.0.1',
    //   analyzerPort: '8888',
    //   reportFilename: 'report.html',
    //   defaultSizes: 'parsed',
    //   openAnalyzer: true,
    //   generateStatsFile: false,
    //   statsFilename: 'stats.json',
    //   statsOptions: null,
    //   excludeAssets: null,
    //   logLevel: info
    // })
  ]
}

2. 配置 package.json 文件

{
 "scripts": {
    "dev": "webpack --config webpack.dev.js --progress"
  }
}

3. 在命令行工具中输入

npm run dev

按回车。此时会打开浏览器，你将看到项目资源包的交互式可视化树形分析图。

图中占面积越大的文件，其文件的大小越大，部署到服务器之后，在浏览器中加载的时间越长，点击左上角的像箭头一样的符号可以直接查看各个文件的大小。

该分析图可以帮助我们：

• 了解 bundle 包中的真正内容
• 找出哪些模块尺寸最大
• 查找误引入的模块
• 优化项目

最棒的是它支持缩小的 bundle 文件，它解析它们以获得 bundle 文件模块的实际大小，还显示了它们的压缩大小。

得到可视化的分析结果之后，接下来就对占比比较大或者依赖程度比较高的文件进行优化了。

4. 参数配置

new BundleAnalyzerPlugin(options?: object)

优点：简单
缺点：每次运行打包命令时，都在本地起一个端口号为8888的本地服务器，并自动在浏览器中展示项目的分析结果。不够灵活，并不是每次构建都想看代码分析！

2. 作为CLI的一个工具

如果你有一个 webpack stats JSON 文件，你可以分析一个现有的包。

1、配置 webpack.config.js 文件：

可以使用 BundleAnalyzerPlugin 将 generateStatsFile 选项设置为 true

// webpack.config.js 文件
 
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'disabled', // 不启动展示打包报告的http服务器
      generateStatsFile: true, // 是否生成stats.json文件
    }),
  ]
}

2、配置 package.json 文件

{
 "scripts": {
    "generateAnalyzFile": "webpack --profile --json > stats.json", // 生成分析文件
    "analyz": "webpack-bundle-analyzer --port 8888 ./dist/stats.json" // 启动展示打包报告的http服务器
  }
}

 3、在命令行工具中，先运行 npm run generateAnalyzFile 命令，然后运行 npm run analyz 命令。此时就可以看到分析结果了。

优点：稍微复杂，但是灵活
缺点：每次运行命令时，都会在 dist 目录下生成一个 stats.json 文件。这个问题，可以将 generateStatsFile 属性设置为 false，但是这样就无法生成 stats.json 文件了。解决办法：需要查看分析报告的时候设置为 true，其余时候设置为 false。

参考文章：

webpack-bundle-analyzer – npm (npmjs.com)

webpack-bundle-analyzer插件快速入门 – 简书 (jianshu.com)

原文地址：https://blog.csdn.net/weixin_50836306/article/details/123131163原文链接：https://www.jb51.net/article/274525.htm
本文来源 爱码网，其版权均为 原网址 所有 与本站无关，文章内容系作者个人观点，不代表 本站 对观点赞同或支持。如需转载，请注明文章来源。