vue/cli4 项目中配置webpack-bundle-analyzer分析包插件,查找需要优化的文件

本文介绍了如何在Vue CLI 4项目中配置和使用webpack-bundle-analyzer工具,通过分析包的大小和占比,帮助开发者识别需要优化的文件。详细步骤包括安装、修改vue.config.js和package.json文件,以及运行分析工具后的结果解读。
摘要由CSDN通过智能技术生成

@vue/cli 4 项目中安装 webpack-bundle-analyzer 分析包,来查找需要优化的文件


在安装 webpack-bundle-analyzer 分析包之前,在项目中可以通过 npm list vue 查看项目所使用的 @vue 版本以及运行 vue -V 查看项目所使用的 @vue/cli 版本。

1、简介及安装

webpack-bundle-analyzer 可视化资源分析工具可以直观地分析打包出的文件有哪些,及它们的大小、占比情况、各文件 Gzipped 后的大小、模块包含关系、依赖项等。

在终端或 DOS 命令窗口中输入以下的命令行先安装 webpack-bundle-analyzer

npm install webpack-bundle-analyzer -D

2、修改 vue.config.js和 package.json

文件位置:

① 修改 vue.config.js文件,代码如下:

module.exports 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值