vue中如何通过webpack-bundle-analyzer打包分析工具进行配置优化

        vue中随着项目的不断功能迭代和开发,项目文件越来越多,项目的打包文件也越来越大。如何对打包文件进行分析优化,减小打包文件大小呢?可以通过webpack-bundle-analyzer 这个打包分析工具进行解决。

1、webpack-bundle-analyzer的安装

        通过执行 yarn add -D webpack-bundle-analyzer 命令安装插件。

yarn add -D webpack-bundle-analyzer

2、vue.config.js配置文件设置

       在vue.config.js配置文件中增加webpack-bundle-analyzer插件配置。只有环境变量ANALAYZ为TRUE时才进行打包分析。

module.exports = {chainWebpack: (config) => {if (process.env.ANALAYZ) {  config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin);  }},
};

3、在package.json文件汇总添加analyz分析命令

       在package.json配置文件中添自定义的analyz命令。

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","analyz": "cross-env ANALAYZ=true vue-cli-service build"
},

4、执行analyz分析命令

        允许yarn analyz 执行打包分析命令,执行完毕后,访问http://127.0.0.1:8888/地址即可查看最终生成的打包分析包。图中占面积越大的文件,其文件的大小越大。也可左侧的箭头打开文件列表查看每个文件的具体大小。


新时代农民工

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

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

相关文章

学生管理系统-07打包与上线

一、项目架构 vue的项目必须要进行打包,并部署在nginx服务器上的 二、vue的打包 1、修改vue.cofing.js文件 在该文件中添加publicPath属性,值为./ const { defineConfig } = require(@vue/cli-service) module.exports = defineConfig({ transpileDependencies: true, p…

Python Flask构建微信小程序订餐系统 (十一)

🔥 已经删除的会员不允许进行编辑昵称 🔥 🔥 已经删除的会员要隐藏掉会员信息的编辑按钮 🔥 🔥 创建商品表 food 🔥 CREATE TABLE `food` (`id` int(11) unsigned NOT NULL AUTO_INCREMENT,`cat_id` int(11) NOT NULL DEFAULT 0 COMMENT 分类id,`name` varchar…

存储转发服务

此服务用于以下场景,有模拟服务的需求,可以通过转发服务,记录请求和返回参数,存入本地,下次同样请求,不再请求真是服务。可以用在soap服务,webapi服务。 Router: import { RouterAbs } from ./…

【算法题解】51. 二叉树的最近公共祖先

这是一道 中等难度 的题 https://leetcode.cn/problems/lowest-common-ancestor-of-a-binary-tree/ 题目 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为:“对于有根树 T 的两个节点 p、q,最近公共祖先表示为…

【模型压缩】 LPPN论文阅读笔记

LPPN论文阅读笔记 LPPN: A Lightweight Network for Fast Phase Picking 背景 深度学习模型的问题在于计算复杂度较高,在实际数据处理中需要面临较高的处理代价,且需要专用的加速处理设备,如GPU。随着数据累积,迫切需要设计一种…

【力扣刷题 | 第二十二天】

目录 前言: 63. 不同路径 II - 力扣(LeetCode) 343. 整数拆分 - 力扣(LeetCode) 总结: 前言: 今天我们爆刷动态规划章节的题目,相关的算法理论介绍我也有写过文章:【夜…

深度学习anaconda+pycharm+虚拟环境迁移

一、下载好anaconda和pycharm安装包。 下载anaconda:Index of /anaconda/archive/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror pycharm汉化包 二、安装anaconda 深度学习环境配置-Anaconda以及pytorch1.2.0的环境配置(Bubbliiiing 深度学习 教程&…

RocketMQ集成Springboot --Chapter1

RocketMQ集成Springboot 三种消息发送方式 生产者 引入依赖 <!--⽗⼯程--><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.3.2.RELEASE</version><…

Java版本企业电子招标采购系统源码:营造全面规范安全的电子招投标环境,促进招投标市场健康可持续发展

营造全面规范安全的电子招投标环境&#xff0c;促进招投标市场健康可持续发展 传统采购模式面临的挑战 一、立项管理 1、招标立项申请 功能点&#xff1a;招标类项目立项申请入口&#xff0c;用户可以保存为草稿&#xff0c;提交。 2、非招标立项申请 功能点&#xff1a;非招标…

uniapp小程序跳转其他小程序uni.navigateToMiniProgram效果demo(整理)

放点击事件里面即可 uni.navigateToMiniProgram({appId: , //跳转的小程序的aooIdpath: pages/index/index?id123, //如果这里不填&#xff0c;默认是跳转到对方小程序的主页面extraData: { //需要传给对方小程序的数据data1: test},success(res) {// 打开成功} })

【html中的BFC是什么】

BFC&#xff08;块级格式化上下文&#xff09;是 CSS 中的一种盒模型布局&#xff0c;是指一个独立的块级容器&#xff0c;容器内部的元素会按照一定规则进行布局。 BFC 具体的规则有以下几个&#xff1a; BFC 内部的元素在垂直方向上相互排列&#xff0c;不会出现浮动的情况。…

JAVA设计模式——单例模式

单例模式是应用最广的设计模式之一&#xff0c;也是程序员最熟悉的一个设计模式&#xff0c;使用单例模式的类必须保证只能有创建一个对象。 今天主要是回顾一下单例模式&#xff0c;主要是想搞懂以下几个问题 为什么要使用单例&#xff1f; 如何实现一个单例&#xff1f; 单…

c++11/c++98动态规划入门第5课,经典DP问题 --- 区间

第1题 取数问题 查看测评数据信息 有一排N个数&#xff0c;你和小明2个人玩游戏&#xff0c;每个人轮流从2端取数&#xff0c;每次可以从左或右取&#xff0c;不能从中间取。你取的所有的数的和是你的得分&#xff0c;小明取的所有的数的和是小明的得分。如果你先取&#x…

ISP 模块原理

图像锐化&#xff1a; 图像信号处理芯片设计原理----13 图像锐化 - 知乎 (zhihu.com) bayer /RGB去噪&#xff1a; 图像信号处理芯片设计原理——12 RAW域和YUV域上的去噪 - 知乎 (zhihu.com) 图像去噪技术简要总结 - 知乎 (zhihu.com) (72条消息) 非局部均值去噪&#xf…

【图像分割】基于蜣螂优化算法DBO的Otsu(大津法)多阈值电表数字图像分割 电表数字识别【Matlab代码#51】

文章目录 【可更换其他算法&#xff0c;获取资源请见文章第5节&#xff1a;资源获取】1. 原始蜣螂优化算法1.1 滚球行为1.2 跳舞行为1.3 繁殖行为1.4 偷窃行为 2. 多阈值Otsu原理3. 部分代码展示4. 仿真结果展示5. 资源获取说明 【可更换其他算法&#xff0c;获取资源请见文章第…

springboot 项目启动不打印spring 启动日志

今天项目遇到一个很奇怪的问题&#xff0c;服务在启动时&#xff0c;不打印spring 的启动日志。经过排查发现是因为其他的依赖引入了 log4j 的依赖&#xff0c;因为我们的项目用的是logback&#xff0c;所以项目中没有log4j 的相关配置&#xff0c;所以干扰到了日志的打印 原因…

Vue入门项目——WebApi

Vue入门——WebApi vue3项目搭建组合式API响应式APIreactive()ref() 生命周期钩子computed计算属性函数watch监听函数父子通信模板引用组合选项 vue3项目搭建 简单看下Vue3的优势吧 下载安装npm及node.js16.0以上版本&#xff08;确保安装成功可用如下代码检查版本&#xff0…

工厂电能质量治理解决方案

1、概述 谐波的危害十分严重&#xff0c;尤其在工厂这种设备较多的场合。大部分设备都是谐波源&#xff0c;谐波使电能的生产、传输和利用的效率降低&#xff0c;使电气设备过热、产生振动和噪声&#xff0c;并使绝缘老化&#xff0c;使用寿命缩短&#xff0c;甚至发生故障或烧…

RocketMQ 5.0 无状态实时性消费详解

作者&#xff1a;绍舒 背景 RocketMQ 5.0 版本引入了 Proxy 模块、无状态 pop 消费机制和 gRPC 协议等创新功能&#xff0c;同时还推出了一种全新的客户端类型&#xff1a;SimpleConsumer。 SimpleConsumer 客户端采用了无状态的 pop 机制&#xff0c;彻底解决了在客户端发布…

创作纪念日——Hello World

创作纪念日——Hello World 导读 正在报告&#xff01; ——迅捷斥候 成就 精通多种语言的Hello World 1. C #include int main() {printf("Hello, World");return(0); }2. C int main() {std::cout << "Hello World";return 0; }3. C# using…