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
可以通过多种方式使用,以下是常见的几种:
在你的 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
:禁用分析器。你可以在命令行中使用 webpack-bundle-analyzer
,通过运行以下命令来生成报告:
npx webpack-bundle-analyzer
首先,你需要生成 Webpack 的 stats 文件。可以通过在 Webpack 配置中添加 --json
选项来生成:
webpack --json > stats.json
然后运行分析器:
npx webpack-bundle-analyzer stats.json
如果你在使用 Vue CLI 创建的项目,你可以在 vue.config.js
中配置 webpack-bundle-analyzer
:
// vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.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_ENV=production vue-cli-service build --mode production",
或
"analyz": "cross-env NODE_ENV=production npm run build",
然后构建打包,完成后,我们发现在 dist 文件夹里生成了一个 report.html 文件与stats.json 文件
npm run analyz
这种方式会生成 stats.json 文件(很大,部署时需要移除),除此之外,还能看到每一个文件的 Stat size、Parsed size、Gzipped size三种格式的文件大小
analyzerMode:
string
'server'
'server'
: 在服务器上启动 HTTP 服务并打开浏览器窗口显示报告(默认)。'static'
: 生成一个包含报告的单个 HTML 文件。'json'
: 生成 JSON 格式的报告文件。'disabled'
: 不生成任何报告或开启服务器。reportFilename:
string
'report.html'
analyzerMode
为 'static'
时,这个选项决定了生成的 HTML 报告文件的名称与路径。openAnalyzer:
boolean
true
generateStatsFile:
boolean
false
statsFilename:
string
'stats.json'
generateStatsFile
设置为 true
时,这个选项用于指定生成的 stats 文件的名称。statsOptions:
object
null
stats
文件的选项。可以传入 Webpack 的 Stats 选项,以便定制化包含的信息。openAnalyzer:
boolean
true
excludeAssets:
array
[]
analyzerHost 和 analyzerPort:
number
8888
'server'
模式时,这些配置将决定你通过哪个地址访问分析报告。defaultSizes:
string
'parsed'
'stat'
: 包含原始大小。'parsed'
: 包含解析后的大小(即去除了压缩后的大小)。'gzipped'
: 包含 Gzip 后的大小。如果你选择了 static
模式,报告将生成在指定的文件中(如 bundle-report.html
)。打开文件时,你会看到如下内容:
在分析报告中,你可以找到以下信息:
根据分析结果,你可以采取以下措施来优化你的打包:
import()
)来分割较大的模块,从而按需加载。