网站变更备案,制作书签的作文,wordpress api 插件,腾讯云改wordpresswebpack-bundle-analyzer 是一个非常有用的工具#xff0c;用于可视化和分析 Webpack 打包生成的文件。这使得开发者能够更好地理解应用的依赖关系、包的大小#xff0c;以及优化打包的机会。以下是关于 webpack-bundle-analyzer 的详细介绍#xff0c;包括它的安装、使用以…webpack-bundle-analyzer 是一个非常有用的工具用于可视化和分析 Webpack 打包生成的文件。这使得开发者能够更好地理解应用的依赖关系、包的大小以及优化打包的机会。以下是关于 webpack-bundle-analyzer 的详细介绍包括它的安装、使用以及如何解读生成的报告。文档。
安装
你可以通过 npm 或 yarn 安装 webpack-bundle-analyzer
npm install --save-dev webpack-bundle-analyzer
或者使用 yarn
yarn add --dev webpack-bundle-analyzer
配置
webpack-bundle-analyzer 可以通过多种方式使用以下是常见的几种
1. 在 Webpack 配置中使用
在你的 Webpack 配置文件中引入 webpack-bundle-analyzer 插件并将其添加到 plugins 数组中。
const { BundleAnalyzerPlugin } require(webpack-bundle-analyzer);module.exports {// 其他配置...plugins: [new BundleAnalyzerPlugin({// 这里可以设置一些选项analyzerMode: static, analyzerPort: 8888,reportFilename: report.html, // 打包后的报告文件名openAnalyzer: true, // 自动打开报告generateStatsFile: true, // 生成 stats.json 文件statsFilename: stats.json, // stats 文件名称}),// 其他插件...],
}; 运行Webpack并生成分析报告
npx webpack --mode production 这将在dist目录下生成一个report.html文件打开这个文件你将看到一个交互式的图表显示了你的包的大小分布。
在上述配置中analyzerMode 可以选择 server、static 或 disabled
server在本地服务器上启动一个分析器默认在 http://localhost:8888。static生成一个静态的 HTML 文件默认文件名为 report.html。disabled禁用分析器。 2. 通过命令行使用
你可以在命令行中使用 webpack-bundle-analyzer通过运行以下命令来生成报告
npx webpack-bundle-analyzer path-to-your-stats-file 首先你需要生成 Webpack 的 stats 文件。可以通过在 Webpack 配置中添加 --json 选项来生成
webpack --json stats.json
然后运行分析器
npx webpack-bundle-analyzer stats.json
3. 在 Vue CLI 项目中使用
如果你在使用 Vue CLI 创建的项目你可以在 vue.config.js 中配置 webpack-bundle-analyzer // vue.config.js
const BundleAnalyzerPlugin require(webpack-bundle-analyzer).BundleAnalyzerPluginmodule.exports {configureWebpack: {plugins: [// 配置包分析器new BundleAnalyzerPlugin({analyzerMode: static,// analyzerMode: server,// analyzerMode: disabled,// analyzerHost: 127.0.0.1,// analyzerPort: 8888,reportFilename: report.html,defaultSizes: gzip,generateStatsFile: true, // 如果为true则Webpack Stats JSON文件将在bundle输出目录中生成openAnalyzer: false, // 默认在浏览器中自动打开报告statsFilename: stats.json, // 如果generateStatsFile为true将会生成Webpack Stats JSON文件的名字statsOptions: { source: false }})]}
}在 package.json 中找到 scripts添加
analyz: cross-env NODE_ENVproduction vue-cli-service build --mode production,
或
analyz: cross-env NODE_ENVproduction npm run build, 然后构建打包完成后我们发现在 dist 文件夹里生成了一个 report.html 文件与stats.json 文件
npm run analyz
这种方式会生成 stats.json 文件很大部署时需要移除除此之外还能看到每一个文件的 Stat size、Parsed size、Gzipped size三种格式的文件大小
webpack-bundle-analyzer的主要配置项及其作用 analyzerMode: 类型: string默认值: server说明: 指定分析模式。可选值 server: 在服务器上启动 HTTP 服务并打开浏览器窗口显示报告默认。static: 生成一个包含报告的单个 HTML 文件。json: 生成 JSON 格式的报告文件。disabled: 不生成任何报告或开启服务器。 reportFilename: 类型: string默认值: report.html说明: 当 analyzerMode 为 static 时这个选项决定了生成的 HTML 报告文件的名称与路径。 openAnalyzer: 类型: boolean默认值: true说明: 是否在构建完成后自动打开报告页面。 generateStatsFile: 类型: boolean默认值: false说明:是否在生成报告的同时也生成一个 stats.json 文件该文件包含了打包过程中的详细信息。 statsFilename: 类型: string默认值: stats.json说明: : 当 generateStatsFile 设置为 true 时这个选项用于指定生成的 stats 文件的名称。 statsOptions: 类型: object默认值: null说明: 用于配置生成 stats 文件的选项。可以传入 Webpack 的 Stats 选项以便定制化包含的信息。 openAnalyzer: 类型: boolean默认值: true说明: 是否在完成构建后自动打开分析报告。 excludeAssets: 类型: array默认值: []说明: 允许通过正则表达式或函数来排除特定资源不被包含到报告中。 analyzerHost 和 analyzerPort: 类型: number默认值: 8888说明: 分别指定运行本地 HTTP 服务器的主机名和端口。当你选择 server 模式时这些配置将决定你通过哪个地址访问分析报告。 defaultSizes: 类型: string默认值: parsed说明: 报告中默认显示的大小类型。可选值 stat: 包含原始大小。parsed: 包含解析后的大小即去除了压缩后的大小。gzipped: 包含 Gzip 后的大小。brotli 压缩后的大小
查看报告
如果你选择了 static 模式报告将生成在指定的文件中如 bundle-report.html。打开文件时你会看到如下内容
包大小每个模块的大小以及整个应用的总大小。依赖树显示各个模块之间的依赖关系可以展开和收缩查看。颜色编码模块的颜色通常表明其大小帮助你快速识别大包。 解读报告
在分析报告中你可以找到以下信息
模块大小可以查看各个模块的实际大小识别出哪些包过大需要优化。依赖关系可以很直观地看到各个模块是如何相互依赖的便于理解整个应用的结构。第三方库可以查看第三方库如 React、Lodash 等的大小帮助你决定是否需要使用更轻量的替代库。
优化
根据分析结果你可以采取以下措施来优化你的打包
代码分割使用动态导入import()来分割较大的模块从而按需加载。懒加载将不必要的模块懒加载只有在需要时再加载它们。移除未使用的依赖检查并删除不再使用的依赖包。使用轻量库如果某些库的大小过大考虑使用更小的替代库。
