您现在的位置是:首页 > 正文

Vue项目性能分析工具--webpack-bundle-analyzer

2024-02-01 04:17:40阅读 2

在优化项目的时候,每次打包后只知道包文件大,却不知道那个文件大,那个文件还有优化的空间,所以,推荐一款工具,只要在项目中安装配置一下,便可以一目了然的呈现出打包后资源所占的比例,接下来上教程:

我的项目是基于Vue-Cli4.0的,不同版本对应不同的配置文件呦;

1、安装webpack-bundle-analyzer

npm install webpack-bundle-analyzer --save-dev

2、在Vue.config.js文件中配置:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin()
    ]
}

3、在控制台上输入命令进行打包:

npm run build:prod --report

4、在启动的时候,控制台会有提示,只要按照提示访问: 127.0.0.1:8888,就可以看到项目分析的内容了。如图:

 

 好啦,分享结束,希望对你们有所帮助!

网站文章

  • html改有序列表的序号颜色,CSS3 自定义OL/LI有序列表序号样式

    CSS语言:CSSSCSS确定@import url(https://fonts.googleapis.com/css?family=Rambla:400,400italic,700);html {b...

    2024-02-01 04:17:12
  • 表格与表单

    表格与表单

    表格、表单

    2024-02-01 04:17:04
  • .htaccess的301重定向代码汇总

    很久以前做过一个图片站,很久没有打理了。域名不打算续费了,但是这么多年的权重不能浪费了啊!于是我决定将它301跳转到另一个域名的子域名,在到期之前传递点权重。.htaccess的301重定向方式有以下几种:1.把不带www的域名301重定向到带www的域名

    2024-02-01 04:16:58
  • Java包装类练习题

    选择题1.C2.C3.BC4.D5.C6.B7.D8.A编程题完成基本数据类型和包装类之间的转换。public class HelloWorld { public static void main(String[] args) { // 定义int类型变量,值为100 int score = 100; ...

    2024-02-01 04:16:31
  • Linux下删除日志失败,df -h 和 du -sh 显示的数据不一致现象

    Linux下删除日志失败,df -h 和 du -sh 显示的数据不一致现象 问题背景: 在机器上的服务日志没有分天,日志堆积,磁盘被写满,当我直接执行rm 命令删除日志时,执行完之后,发现: 采用d...

    2024-02-01 04:16:25
  • javascript 函数和变量是区分大小写的

    javascript区分大小写吗, 我试了一下好像区分的2012-09-27 20:29zxingruo | 分类:JavaScript | 浏览148次分享到:2012-09-27 20:35网友采纳JS是对大小写敏感的,变量名,函数,关键字都要区分大小写,比如说变量a和A其实是两个不同的变量.

    2024-02-01 04:16:18
  • 能上QQ但不能打开网页——解决办法

    一、感染了病毒所致 这种情况往往表现在打开IE时,在IE界面的左下框里提示:正在打开网页,但老半天没响应。在任务管理器里查看进程,(进入方法,把鼠标放在任务栏上,按右键—任务管理器—进程)看看CPU的占用率如何,如果是100%,可以肯定,是感染了病毒,这时你想运行其他程序简直就是受罪。这就要查查是哪个进程贪婪地占用了CPU资源。 找到后,最好把名称记录下来,然后点击结束,...

    2024-02-01 04:15:51
  • react html2canvas 遇到的坑

    html2canvas https://html2canvas.hertzen.com 1. svg 图片导出后样式不全 这是由于html2canvas 读取dom树时不会读取svg标签外面的样式。 ...

    2024-02-01 04:15:44
  • MTK 开启DISP LOG

    需要执行如下命令: adb shell “echo dbg_log:1 > /d/dispsys”

    2024-02-01 04:15:36
  • 超详细的Windows新装机流程(自装Windows系统、设置BIOS等)

    超详细的Windows新装机流程(自装Windows系统、设置BIOS等)

    一、BIOS常规设置 新装机涉及到的BIOS常规设置有哪些? 主要是2方面的设置 (1)CMS兼容性支持模块,请设置【Enabled】,即是开启了CSM: 部分主板若是使用集显,CSM显示灰色,这是由...

    2024-02-01 04:15:28