Webpack Bundle Analyzer包分析器

当我们需要分析打包文件dist里哪些资源可以进一步优化时,就可以使用包分析器插件webpack-bundle-analyzer。NPM上的介绍是使用交互式可缩放树图可视化 webpack 输出文件的大小。

我的是vue2项目。

1、webpack-bundle-analyzer插件的安装

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

2、在 webpack.config.js 中找到 chainWebpack,加入以下配置

module.exports = {chainWebpack: config => {// 配置包分析器config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)}
}

3、在package.json的scripts中添加以下命令行

"analyz": "cross-env NODE_ENV=production vue-cli-service build --mode test"

4、npm run analyz重新运行项目

报错了,“'cross-env' is not recognized as an internal or external command, operable program or batch file.”

解决方法:

webpack打包报错,原因是windows不支持 cross-env,安装模块即可:

npm install -g  cross-env

5、npm run analyz重新运行项目

6、浏览器会自动打开127.0.0.1:8888(我们手动输入localhost:8888也是可以的)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/175410.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux中的工程管理工具makefile

makefile文件:Linux上的工程管理工具,可以实现自动化编译; 工程中的源文件不计其数,可以根据模块,功能等存储在不同的目录中; makefile可以提高编译效率,使用make命令每次只会编译那些修改了的或者依赖修改了的这些文件,没有修改的文件不会重新编译. VS底层就有自己的makefile文…

CRM系统对科技企业有哪些帮助

随着国家政策的倾斜和5G等相关基础技术的发展,中国人工智能产业在各方的共同推动下进入爆发式增长阶段,市场发展潜力巨大。CRM客户管理系统作为当下最热门的企业应用,同样市场前景广阔。那么,CRM系统对科技企业有哪些帮助&#xf…

千兆路由只有200M,原来是模式选择不对,也找到了内网不能通过动态域名访问内部服务的原因

本来1000M的宽带接入的,但是一测试发现只有200M,把电信叼了过来, 一测试发现宽带没问题,网线正常,网卡正常,只有可能是路由器的问题了,尴尬了,赶紧给满意好评放他走。回头好好研究一…

在qt的设计师界面没有QVTKOpenGLWidget这个类,只有QOpenGLWidget,那么我们如何得到QVTKOpenGLWidget呢?

文章目录 前言不过,时过境迁,QVTKOpenGLWidget用的越来越少,官方推荐使用qvtkopengnativewidget代替QVTKOpenGLWidget 前言 在qt的设计师界面没有QVTKOpenGLWidget这个类,只有QOpenGLWidget,我们要使用QVTKOpenGLWidget,那么我们如何得到QVTKOpenGLWidget呢? 不过,时过境迁,Q…

3.3 Linux 文件管理

1、查看系统信息 tty 命令 描述:查看当前系统在哪个终端语法:tty Linux默认情况下提供6个虚拟终端来让用户登录,系统将F1~F6定义为tty1~tty6。 ctrlalt(F1~F6) :从图形界面切换到命令行界面的第 n 个虚拟终端(F1 是…

MAT工具定位分析Java堆内存泄漏问题方法

原创/朱季谦 一、MAT概述与安装 MAT,全称Memory Analysis Tools,是一款分析Java堆内存的工具,可以快速定位到堆内泄漏问题。该工具提供了两种使用方式,一种是插件版,可以安装到Eclipse使用,另一种是独立版…

世界互联网大会|云轴科技ZStack受邀分享云原生超融合

11月8日至10日“世界互联网大会乌镇峰会”在浙江嘉兴的乌镇开幕,大会的主题为“建设包容、普惠、有韧性的数字世界——携手构建网络空间命运共同体”,全球各界代表就热点焦点问题展开讨论,反映产业各界对互联网发展的前瞻思考,引领…

【Linux】进程等待

什么是进程等待? 通过系统用wait/waitpid,来进行对子进程进行状态检测与回收的功能! 为什么要有进程等待? ‘僵尸进程’无法被杀死,只能通过进程等待来回收,进而解决内存泄漏问题。父进程通过进程等待的方…

Webpack 性能优化 二次编译速度提升3倍!

本文作者为 360 奇舞团前端开发工程师 Rien. 本篇文章主要记录 webpack 的一次性能优化。 现状 随着业务复杂度的不断增加,项目也开始变得庞大,工程模块的体积也不断增加,webpack 编译的时间也会越来越久,我们现在的项目二次编译的…

评论:AlexNet和CaffeNet有何区别?

一、说明 在这个故事中,我们回顾了AlexNet和CaffeNet。AlexNet 是2012 年ILSVRC(ImageNet 大规模视觉识别竞赛)的获胜者,这是一项图像分类竞赛。而CaffeNet是AlexNet的单GPU版,因此,我们平时在普通电脑的Al…

Word或者WPS批量调整文中图片大小的快捷方法

文章目录 0、前言1、编写宏代码2、在文档中调用宏实现一键批量调整3、就这么简单! 0、前言 不知道大家是不是也和我一样,经常需要在编写的Word(或者WPS)文档里插入大量的图片,但是这些图片的尺寸大小一般都不一样&…

PostgreSQL基本操作

目录 1.源码安装PostgreSQL 1.1.前置条件(root下操作) 1.1.1.卸载yum安装的postgresql 1.1.2.创建postgres用户 1.1.3.安装部分依赖 1.1.4.源码安装uuid 1.2.安装PostgreSQL 1.2.1.使用postgres用户管理PostgreSQL 1.2.2.下载解压postgres12源码…