webpack-bundle-analyzer使用
# webpack-bundle-analyzer使用
Webpack 插件实用程序，将捆绑内容表示为方便和可看的CLI树状图
webpack包分析器: 使用可输出文件大小的树形图可视化 webpack 输出。
本模块将帮助您：
- 了解内容捆绑包中的真实内容
- 展现什么模块 融合了它最大的尺寸
- 查找错误到达的模块
- 优化一下！
最重要的是它缩小了的捆绑包！它解析了它们的工具包还显示了它们的实际形状！
yarn add -D webpack-cli
webpack --config webpack.dev.js --progress
yarn add -D webpack-bundle-analyzer
1
2
3
4
5
2
3
4
5
webpack-bundle-analyzer是webpack的插件，功能是生成代码分析报告，帮助提升代码质量和网站性能。vue-cli中使用webpack-bundle-analyzer分析webpcak构建产物。- 分析
webpack打包之后的结果，观察各个静态资源的大小。 vue-cli官方已经集成了这个插件。
# vue-cli-service build
--mode 指定环境模式（默认值：production）
--dest 指定输出目录（默认值：dist）
--modern 面向现代浏览器带自动回退地构建应用
--target app | lib | wc | wc-async （默认值：app）
--name 库或 Web Components 模式下的名字
--no-clean 在构建项目之前不清楚目标目录
--report 生成 report.html 以帮助分析包内容
--report-json 生成 report.json 以帮助分析包内容
--watch 监听文件变化
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# vue-cli 中使用
vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
configureWebpack: {
plugins: [
new BundleAnalyzerPlugin()
]
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
改完 vue.config.js 后，运行 yarn build 就能自动打开一个网页，运行在 8888 端口，显示 webpack 分析报告。
# 选项（用于插件）
new BundleAnalyzerPlugin(options?: object)
1