webpack-bundle-analyzer插件快速入门
前言
首先,这是一个webpack的插件,需要配合webpack和webpack-cli一起使用。这个插件的功能是生成代码分析报告,帮助提升代码质量和网站性能。
安装
# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer
使用方法一
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
,按回车。
此时会打开浏览器,你将看到项目的分析图,大概长这样。
优点: 简单! 缺点: 每次运行打包命令时,都在本地起一个端口号为8888的本地服务器,并自动在浏览器中展示项目的分析结果。不够灵活,并不是每次构建都想看代码分析!
使用方法二
1、配置webpack.config.js文件:
// 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
。
总结
本文仅仅做个最简单的演示,方便小白快速入门。关于这个插件的更多配置,请查看官方的文档。如有纰漏或疑问,欢迎在评论区或者私信我,我看到就会回复的。
官方文档链接:www.npmjs.com/package/web…
转载自:https://juejin.cn/post/6844903825216651271