性能分析webpack-bundle-analyzer

胡高寒
2023-12-01

webpack插件的github地址是:

https://github.com/webpack-contrib/webpack-bundle-analyzer/

安装

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

package.json

 "dev": "cross-env  webpack-dev-server --open --config ./webpack.config.dev.js --color"
 "build": "cross-env BABEL_ENV=production webpack --color --config ./webpack.config.prod.js"

webpack.config.dev.js/webpack.config.prod.js

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      ...更多配置
    }),
}

我个人是直接执行 npm run dev  或者 npm run build 就可根据分析工具的配置进行查看

更多配置

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

其他

由于webpack-bundle-analyzer是默认打开一个本地的端口8888来显示结果,而webpack-dev-server是默认打开本地的3000端口,两者的行为是有些类似的。只要在webpack的配置文件中,配置了webpack-bundle-analyzer,那么就会打开8888端口。

所以,对于webpack这件事情来说,

如果执行的命令是webpack,那么,就只会打开webpack-bundle-analyzer8888。 如何执行的命令是webpack-dev-server的话,那么就会打开两个网页(浏览器),一个是端口3000,一个是端口8888

另外,额外的补充一下: webpack-dev-server是可以定义用什么浏览器打开的。 截至到发稿, webpack-bundle-analyzer是不能定义使用什么浏览器打开的。作者比较轴,就是不肯添加这么一个选项,而 edge浏览器默认打不开相关视图。

 

 

 类似资料: