Vue3.2 + vue/cli-service 打包 chunk-vendors.js 文件过大导致页面加载缓慢解决方案
chunk-vendors.js 是/node_modules 目录下的所有模块打包成的包, 但是这包太大导致页面加载很慢(我的都要3-4秒了), 这个时候就会出现白屏的情况
解决方案
1、compression-webpack-plugin 插件解决方案
1)、安装
npm install compression-webpack-plugin -D
2)、在vue.config.js中使用 compression-webpack-plugin

const compressionWebpackPlugin = require('compression-webpack-plugin');chainWebpack: config => {if (!_IS_DEV__) {// 开启gzip压缩config.plugin('compressionPlugin').use(new compressionWebpackPlugin({algorithm: 'gzip',test: /\.js$|\.html$/,threshold: 10240,minRatio: 0.6, // 必须为false, 不然部署之后会报错deleteOriginalAssets: false}));}// nginx server 里面配置// # 前端将文件打包成.gz文件,然后通过nginx的配置,让浏览器直接解析.gz文件,可以大大提升文件加载的速度。// # compression-webpack-plugin 配置// gzip on;// gzip_min_length 1k;// gzip_comp_level 9;// gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;// gzip_vary on;// # 配置禁用 gzip 条件,支持正则,此处表示 ie6 及以下不启用 gzip(因为ie低版本不支持)// gzip_disable "MSIE [1-6]\.";},
3)、压缩对比
压缩之后1.5M变成466kb, 加载的时候就会加载这个466kb的文件

4)、配置nginx:在server中配置如下内容
# 前端将文件打包成.gz文件,然后通过nginx的配置,让浏览器直接解析.gz文件,可以大大提升文件加载的速度。# compression-webpack-plugin 配置gzip on;gzip_min_length 1k;gzip_comp_level 9;gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript applicationx-httpd-php image/jpeg image/gif image/png;gzip_vary on;# 配置禁用 gzip 条件,支持正则,此处表示 ie6 及以下不启用 gzip(因为ie低版本不支持)gzip_disable "MSIE [1-6]\.";
2、使用webpack optimization 进行对大文件分包打包
会把node_modules中的第三方文件独立打包,配置如下:

optimization: {runtimeChunk: 'single',splitChunks: {chunks: 'all',maxInitialRequests: Infinity,minSize: 20000,cacheGroups: {vendors: {test: /[\\/]node_modules[\\/]/, // 使用正则匹配node_modules中引入的模块priority: -10, // 优先级值越大优先级越高,默认-10,不用修改name(module) {// 设定分包以后的文件模块名字,按照包名字替换拼接一下if (!module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)) return;const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];return `npm.${packageName.replace('@', '')}`;}}}}
}
相关文章:
Vue3.2 + vue/cli-service 打包 chunk-vendors.js 文件过大导致页面加载缓慢解决方案
chunk-vendors.js 是/node_modules 目录下的所有模块打包成的包, 但是这包太大导致页面加载很慢(我的都要3-4秒了), 这个时候就会出现白屏的情况 解决方案 1、compression-webpack-plugin 插件解决方案 1)、安装 npm …...
Java学习笔记NO.18
T1.理工超市 (1)题目描述 编写一个程序,设计理工超市功能菜单并完成注册和登录功能的实现。显示完菜单后,提示用户输入菜单项序号。当用户输入<注册>和<登录>菜单序号时模拟完成注册和登录功能,最后提示…...
【JVM】聊聊垃圾回收之三色标记算法
在垃圾收集器 CMS中存在四个阶段,初始标记、并发标记、重新标记、并发清理。 那么在并发标记中由于没有STW,业务程序和GC程序是并发执行的,那么是如何实现对象的并发标记的。 并发垃圾回收 并发标记其实是一个宏观的过程,仍然需…...
鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Image)
Image为图片组件,常用于在应用中显示图片。Image支持加载PixelMap、ResourceStr和DrawableDescriptor类型的数据源,支持png、jpg、jpeg、bmp、svg、webp和gif类型的图片格式。 说明: 该组件从API Version 7开始支持。后续版本如有新增内容&am…...
华为OD面试分享8(2024年)
个人情况: 23毕业,24一战跨考ustc,觉G。 211本,目标院校。 知识储备: 仅限408 用leetcode刷过408排序算法 0项目经验 时间线: 23.12.27 投的简历。当时啥也不会啥也不知道,听入职的同学说…...
Java的堆如何分代的?
前言: java对象一般都是朝生夕死,也有部分对象是一直存在的。两种对象如何都放在一起,进行垃圾回收的时候效率较低。所以通过将不同时期的对象放在不同的内存池中,节省垃圾回收的时间,提高性能。 组成: 新生…...
C# CallerMemberName、CallerFilePath、CallerLineNumber
CallerMemberName:调用某个方法的主方法名称 CallerFilePath:调用某个方法的主方法所在的类文件地址 CallerLineNumber:调用这个方法所在的行号 用这三个附加属性,需要设置默认值。...
Claude3系统解读与使用测评
大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…...
vue3注册全局组件
注册单个全局组件 一.在main.ts中引入注册为全局组件 在main.ts 引入我们的组件跟随在createApp(App) 后面 切记不能放到mount 后面这是一个链式调用用其次调用 component 第一个参数组件名称 第二个参数组件实例 import { createApp } from vue import App from ./App.vue …...
vue 在什么情况下在数据发生改变的时候不会触发视图更新
在 Vue 中,通常数据发生变化时,视图会自动更新。但是,有几种情况可能导致数据变化不会触发视图更新: 1.对象属性的添加或删除: Vue 无法检测到对象属性的添加或删除。因为 Vue 在初始化实例时对属性执行了 getter/se…...
HTML世界之标签Ⅲ
一、dfn 标签 <dfn> 标签是一个短语标签,用来定义一个定义项目。 写法: <dfn></dfn> 二、dialog 标签 <dialog> 标签定义一个对话框、确认框或窗口。 属性 值 描述 open open 规定 dialog 元素是有效的,用户…...
【UE5】游戏框架GamePlay
项目资源文末百度网盘自取 游戏框架 游戏 由 游戏模式(GameMode) 和 游戏状态(GameState) 所组成 加入游戏的 人类玩家 与 玩家控制器(PlayerController) 相关联 玩家控制器允许玩家在游戏中拥有 HUD,这样他们就能在关卡中拥有物理代表 玩家控制器还向玩家提供 …...
用户管理【MySQL】
文章目录 查看用户信息创建用户修改密码删除用户授予权限收回权限 查看用户信息 在名为mysql的数据库中有一个表user维护着 MySQL 的用户信息。 其中: user: 表示该用户的用户名。host: 表示该用户可以从哪个主机登录,localhost…...
Rust教程:How to Rust-变量
本文为第1篇 专栏简介 本专栏是优质Rust技术专栏,推荐精通一门技术栈的蟹友,不建议完全无计算机基础的同学 感谢Rust圣经开源社区的同学,为后来者提供了非常优秀的Rust学习资源 本文使用: 操作系统macOS Sonoma 14 / Apple M…...
TCP/IP超全笔记 - TCP篇
TCP/IP超全笔记 - TCP篇 什么是 TCP TCP(Transmission Control Protocol,传输控制协议)是一种面向连接的、可靠的、基于字节流的传输层通信协议。 面向连接:一对一,先连接,再传输数据可靠交付:…...
MIT 6.858 计算机系统安全讲义 2014 秋季(一)
译者:飞龙 协议:CC BY-NC-SA 4.0 MIT 6.858 计算机系统安全笔记 2014 秋季 2014 年由Nickolai Zeldovich 教授和James Mickens 教授教授授课的 6.858 讲座笔记。这些讲座笔记略有修改,与 6.858 课程网站上发布的内容略有不同。 第1讲&#x…...
mybatis-plus整合spring boot极速入门
使用mybatis-plus整合spring boot,接下来我来操作一番。 一,创建spring boot工程 勾选下面的选项 紧接着,还有springboot和依赖我们需要选。 这样我们就创建好了我们的spring boot,项目。 简化目录结构: 我们发现&a…...
Kafka|处理 Kafka 消息重复的有效措施
文章目录 消息重复场景生产者端Kafka Broker消费者端 如何防止消息重复 消息重复是 Kafka 系统中另一个常见的问题,可能发生在生产者、Broker 或消费者三个方面。下面我们来讨论一些可能导致消息重复的场景以及如何处理。 消息重复场景 生产者端 重试机制导致消息…...
【C++】函数模板和类模板
目录 1.泛型编程 2.函数模板 2.1函数模板的定义格式 2.2函数模板的实例化 2.3函数模板参数的匹配原则 3.类模板 3.1类模板的定义格式 3.2类模板的实例化 3.3模板的分离编译 1.泛型编程 泛型编程:编写与类型无关的通用代码,是代码复用的一种手段…...
Echarts 配置项 series 中的 data 是多维度
文章目录 需求分析 需求 如下图数据格式所示,现要求按照该格式进行绘制折线图 分析 在绘制折线图时,通常我们的 series 中的 data 数据是这样的格式 option {title: {text: Stacked Area Chart},tooltip: {trigger: axis,axisPointer: {type: cross…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站,会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后,网站没有变化的情况。 不熟悉siteground主机的新手,遇到这个问题,就很抓狂,明明是哪都没操作错误&#x…...
国防科技大学计算机基础课程笔记02信息编码
1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制,因此这个了16进制的数据既可以翻译成为这个机器码,也可以翻译成为这个国标码,所以这个时候很容易会出现这个歧义的情况; 因此,我们的这个国…...
深入剖析AI大模型:大模型时代的 Prompt 工程全解析
今天聊的内容,我认为是AI开发里面非常重要的内容。它在AI开发里无处不在,当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗",或者让翻译模型 "将这段合同翻译成商务日语" 时,输入的这句话就是 Prompt。…...
Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动
一、前言说明 在2011版本的gb28181协议中,拉取视频流只要求udp方式,从2016开始要求新增支持tcp被动和tcp主动两种方式,udp理论上会丢包的,所以实际使用过程可能会出现画面花屏的情况,而tcp肯定不丢包,起码…...
安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件
在选煤厂、化工厂、钢铁厂等过程生产型企业,其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进,需提前预防假检、错检、漏检,推动智慧生产运维系统数据的流动和现场赋能应用。同时,…...
DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增:通道注意力模块(SE模块) class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...
大语言模型如何处理长文本?常用文本分割技术详解
为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...
大模型多显卡多服务器并行计算方法与实践指南
一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...
MySQL用户和授权
开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务: test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...
Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)
在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马(服务器方面的)的原理,连接,以及各种木马及连接工具的分享 文件木马:https://w…...
