1，前言
项目写完了准备上线，发现打包后的包很大怎么办？，但是打包后的文件晦涩难懂，如何了解打包文件的细节，到底是哪里占了体积，了解某一个文件是由哪些内容打包而成，从而针对性的优化项目体积。下面给大家介绍一种工具。
2，安装
# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer
3，配置
webpack-bundle-analyzer自定义属性（更详细配置戳这里）：
| 属性名 | 值 | 说明 |
|---|---|---|
| analyzerMode | 'server'，'static'， 'json'，'disabled' | Default: 'server'，分析报告的生成方式 |
| analyzerHost | String | Default: 127.0.0.1，分享报告本地服务器地址 |
| analyzerPort | Number | Default: 8888，分享报告本地端口地址 |
| openAnalyzer | Boolean | Default: true，是否自动打开分析报告页面 |
在vue.config.js中
// 方式一
const BundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
configureWebpack: {
plugins: [
ew BundleAnalyzer({
analyzerMode: process.env.VUE_APP_STAGE === 'LOCAL' ? 'disabled' : 'server', // 本地环境不启用
openAnalyzer: false, // 是否自动打开报告页面
analyzerPort: 9999 // 报告页面端口
})
]
}
}
// 方式二 该方式自定义配置方式暂时未知
module.exports = {
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
}
4，运行
启动项目或者打包项目，会自动打开分析页面（可配置不自动打开，详见目录3配置），如下：
配置图
如果看了觉得有帮助的，我是@鹏多多11997110103，欢迎 点赞 关注 评论；
END
PS：在本页按F12，在console中输入document.querySelectorAll('._2VdqdF')[0].click()，有惊喜哦
往期文章
- 超详细的Cookie增删改查
- 助你上手Vue3全家桶之Vue3教程
- 助你上手Vue3全家桶之VueX4教程
- 助你上手Vue3全家桶之Vue3教程
- 超详细！Vuex手把手教程
- 使用nvm管理node.js版本以及更换npm淘宝镜像源
- 超详细！Vue-Router手把手教程
- vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令
- 微信小程序实现搜索关键词高亮
个人主页
