目录

• 1，前言
• 2，安装
• 3，配置
• 4，运行

1，前言

项目写完了准备上线，发现打包后的包很大怎么办？，但是打包后的文件晦涩难懂，如何了解打包文件的细节，到底是哪里占了体积，了解某一个文件是由哪些内容打包而成，从而针对性的优化项目体积。下面给大家介绍一种工具。

webpack-bundle-analyzer

2，安装

# NPM
npm install --save-dev webpack-bundle-analyzer# Yarn
yarn add -D webpack-bundle-analyzer

3，配置

webpack-bundle-analyzer自定义属性（更详细配置戳这里）：

在vue.config.js中

// 方式一
const BundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPluginmodule.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配置），如下：

如果看了觉得有帮助的，我是@鹏多多i，欢迎 点赞 关注 评论；
END

公众号

往期文章

• vue3+element-plus配置cdn
• 助你上手Vue3全家桶之Vue3教程
• 助你上手Vue3全家桶之VueX4教程
• 助你上手Vue3全家桶之Vue-Router4教程
• 超详细！Vue的九种通信方式
• 超详细！Vuex手把手教程
• 使用nvm管理node.js版本以及更换npm淘宝镜像源
• vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令
• 超详细！Vue-Router手把手教程

个人主页

• CSDN
• GitHub
• 简书
• 博客园
• 掘金

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！