小记一篇 vuecli4项目 打包内存溢出问题

目录

  • 背景
    • 先解决内存溢出问题 让项目能够打包
    • 打包优化
      • 公共第三方模块 提取出来 不走webpack 打包 , 改成 cdn 引入
      • 项目中使用 图片等 静态资源 全部走cdn
      • 使用thread-loader 开启多线程打包
  • 后序

背景

其他项目组有个项目迭代了3年,突然有一天 vuecli-4 webpack打包出现了 内存溢出!于是紧急协助处理了下。

先解决内存溢出问题 让项目能够打包

将打包内存 扩大到4G

// package.json
//将内存 扩大到 4G 。"scripts": {"dev": "NODE_OPTIONS=\"--max-old-space-size=4096\" vue-cli-service serve --mode dev","build:uat": "NODE_OPTIONS=\"--max-old-space-size=4096\" vue-cli-service build --mode uat","build:pre": "NODE_OPTIONS=\"--max-old-space-size=4096\" vue-cli-service build --mode pre","build:prd": "NODE_OPTIONS=\"--max-old-space-size=4096\" vue-cli-service build --mode prd","eslint": "eslint --ext .js,.vue src && eslint \"src/**/*.{js,vue}\" --fix","lint": "vue-cli-service lint --fix","prepare": "husky install"}

node 在Linux服务器 单服务v8运行内存 默认最大为1.4G

打包优化

公共第三方模块 提取出来 不走webpack 打包 , 改成 cdn 引入

// vue.config.jsconfigureWebpack: (config) => {......config.externals = {echarts: "echarts",vue: "Vue",axios: "axios",vuex: "Vuex",'vue-router' : 'VueRouter'}
}
// index.html
<!--   性能优化:这几个包如果通过webpack打包出来体积太大了,影响首屏加载时间-->
<script src="https://xxxx.com/public/wlc/qywx/utils/echarts.min.js"></script>
<script src="https://xxxx.com/public/wlc/qywx/utils/vue.min.js" ></script>
<script src="https://xxxx.com/public/wlc/qywx/utils/axios.min.js" ></script>
<script src="https://xxxx.com/public/wlc/qywx/utils/vuex.min.js" ></script>
<script src="https://xxxx.com/public/wlc/qywx/utils/vue-router.min.js" ></script>

项目中使用 图片等 静态资源 全部走cdn

图片引用直接用cdn ,不走本地打包

使用thread-loader 开启多线程打包

thread-loader 与 vue-loader 和 babel-loader 结合使用以加速构建过程

npm i -D thread-loader// vue.config.jschainWebpack(config) {
...
...// 配置 thread-loader 与 vue-loader 结合config.module.rule('vue').use('thread-loader').loader('thread-loader').options({// 为 thread-loader 设置参数,如线程数workers: 3,// 其他可能需要的选项,如缓存// workerParallelJobs: 50,// poolTimeout: 2000,}).end().use('vue-loader').loader('vue-loader').end()// 配置 thread-loader 与 babel-loader 结合config.module.rule('js').exclude.add(/node_modules/).end().use('thread-loader').loader('thread-loader').options({// 保持与 vue-loader 中 thread-loader 的选项一致workers: 3,// 其他可能需要的选项// ...}).end().use('babel-loader').loader('babel-loader').end()}

后序

项目重构成 vue3 多入口页面。多入口对比单入口 有个优势就是每个入口的打包 内存环境都是独立 ,重新计算的。

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

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

相关文章

链表OJ - 6(链表分割)

题目描述&#xff08;来源&#xff09; 现有一链表的头指针 ListNode* pHead&#xff0c;给一定值x&#xff0c;编写一段代码将所有小于x的结点排在其余结点之前&#xff0c;且不能改变原来的数据顺序&#xff0c;返回重新排列后的链表的头指针。 思路 创建两个链表&#xff0c…

【C#】防御性编程策略float.TryParse()

float.TryParse(Result[0].ToString(), out realValue1);这行C#代码用于尝试将一个字符串转换成浮点数&#xff08;float&#xff09;。具体来说&#xff0c;它使用了 float.TryParse 方法&#xff0c;这是一个非常常用的方法&#xff0c;用于在转换时提供错误处理&#xff0c;…

ChatGPT:引领未来的语言模型革命?

一、引言 随着人工智能技术的不断发展&#xff0c;Chat GPT作为一种自然语言处理技术&#xff0c;已经逐渐渗透到各个领域&#xff0c;具有广泛的应用前景。本文将从多个角度探讨Chat GPT的应用领域及其未来发展趋势。 ChatGPT的语言处理能力超越了以往任何一款人工智能产品。…

iOS知识点---Runloop

iOS 中的 Runloop 机制是一种事件驱动模型&#xff0c;用于管理和调度线程上的事件&#xff0c;确保线程在有工作要做时保持活跃&#xff0c;无事可做时进入休眠状态以节省系统资源。以下是 Runloop 机制的关键组成部分及其工作原理&#xff1a; 关键组成部分与原理&#xff1…

Docker一键快速私有化部署(Ollama+Openwebui) +AI大模型(gemma,llama2,qwen)20240417更新

几行命令教你私有化部署自己的AI大模型&#xff0c;每个人都可以有自己的GTP 第一步&#xff1a;安装Docker(如果已经有了可以直接跳第二步) ####下载安装Docker wget https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo -O/etc/yum.repos.d/docker-ce.repo##…

STM32 USB虚拟串口

电路原理图 usb部分 晶振部分 usb与单片机连接 配置信息 sys配置信息 rcc配置信息 usb配置信息 虚拟串口配置信息 时钟配置信息 项目配置信息 代码 包含文件 主函数代码 实验效果 修改接收波特率依然可以正常接收&#xff0c;也就是说单片机可以自动适应上位机的波特率设置。…

4.17作业

#include "double_link_list.h" node_p create_double_link_list() //创建双向链表 {node_p H(node_p)malloc(sizeof(node));if(HNULL){printf("空间申请失败\n");return NULL;}H->data0;H->priNULL;H->nextNULL;return H; } node_p create_node…

【S32K3 MCAL配置】-6.1-ICU Driver:WKPU外设让MCU芯片从“Low Power Mode低功耗模式”中WakeUp唤醒

"><--返回「Autosar_MCAL高阶配置」专栏主页--> 案例背景:此博文适用于“MCU芯片处在常电”工作(MCU的5V/3.3V供电一直存在)的项目当中。另外S32K3仅有RUN模式和STANDBY模式,MCU进入“Low Power Mode低功耗模式”(STANDBY模式)后,可通过WKPU Pin唤醒MCU芯片…

MapReduce分区机制(Hadoop)

在MapReduce中&#xff0c;分区&#xff08;Partitioning&#xff09;是将Map阶段输出的键值对根据某种规则分发到不同的Reduce任务上的过程。这个过程非常关键&#xff0c;因为它直接影响到了Reduce阶段的负载均衡和性能。 1. 哈希分区&#xff08;Hash Partitioning&#xf…

封装react-antd-table组件参数以及方法如rowSelection、pageNum、pageSize、分页方法等等

一般情况下&#xff0c;我们在页面组件里面都会使用state创建对应的分页参数和分页方法然后传入对应的组件内部&#xff0c;再或者选择行、全选等等&#xff0c;这都会在每一个组件中徒增大量的代码行数&#xff0c;所以简单整理了一下这个只是针对于处理逻辑的组件&#xff1a…

BUUCTF——[GXYCTF2019]BabyUpload

BUUCTF——[GXYCTF2019]BabyUpload 1.上传嘛&#xff0c;直接丢正常的jpg文件进服务器 2.发现可以正常上传&#xff0c;并且回显出来啦文件上传的路径 /var/www/html/upload/7df22610744ec51e9cb7a8a8eb674374/1111.jpg 3.尝试上传一句话木马 <?php eval($POST[123456]…

HDFS详解(Hadoop)

Hadoop 分布式文件系统&#xff08;Hadoop Distributed File System&#xff0c;HDFS&#xff09;是 Apache Hadoop 生态系统的核心组件之一&#xff0c;它是设计用于存储大规模数据集并运行在廉价硬件上的分布式文件系统。 1. 分布式存储&#xff1a; HDFS 将文件分割成若干块…

Python机器学习项目开发实战:深度神经网络

注意&#xff1a;本文提供下载的教程&#xff0c;与以下文章的思路有相同点&#xff0c;也有不同点&#xff0c;最终目标只是让读者从多维度去熟练掌握本知识点。 在Python中开发一个基于深度神经网络的机器学习项目&#xff0c;可以涉及到许多不同的步骤和技术。以下是一个简化…

「 网络安全常用术语解读 」漏洞利用交换VEX详解

漏洞利用交换&#xff08;Vulnerability Exploitability eXchange&#xff0c;简称VEX&#xff09;是一个信息安全领域的标准&#xff0c;旨在提供关于软件漏洞及其潜在利用的实时信息。根据美国政府发布的用例(PDF)&#xff0c;由美国政府开发的漏洞利用交换(VEX)使供应商和用…

[ LeetCode ] 题刷刷(Python)-第26题:删除有序数组中的重复项

题目描述 给你一个 非严格递增排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯一元素的个数。 考虑 nums 的唯一元素的数量为 k &…

工业电脑在ESOP工作站行业应用

ESOP工作站行业应用 项目背景 E-SOP是实现作业指导书电子化&#xff0c;并统一管理和集中控制的一套管理信息平台。信迈科技的ESOP终端是一款体积小巧功能齐全的高性价比工业电脑&#xff0c;上层通过网络与MES系统连接&#xff0c;下层连接显示器展示作业指导书。ESOP控制终…

基于开源IM即时通讯框架MobileIMSDK:RainbowChat v11.5版已发布

关于MobileIMSDK MobileIMSDK 是一套专门为移动端开发的开源IM即时通讯框架&#xff0c;超轻量级、高度提炼&#xff0c;一套API优雅支持UDP 、TCP 、WebSocket 三种协议&#xff0c;支持iOS、Android、H5、小程序、Uniapp、标准Java平台&#xff0c;服务端基于Netty编写。 工…

MAC 终端命令

Command Shift . 显示隐藏文件夹 环境变量路径 ~/.zshrc ~/.bash_profile 每次打开都需要 source 安装Homebrew xcode安装 xcode-select --install brew安装 /bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)” 检查是否…

朗思-我的家园正式上线:朗思科技Agent工具软件--人人拥有“Ai-机器人”

4月16日&#xff0c;朗思科技正式发布"朗思-我的家园"。朗思科技是国内领先的Ai Agent智能自动化工具软件产品及方案的提供商&#xff0c;始终坚持自主研发&#xff0c;全面支持国产信创&#xff0c;不断加快产品创新迭代。基于技术领先性和战略前瞻性&#xff0c;其…

【小白学机器学习13】一文理解假设检验的反证法,H0如何设计的,什么时候用左侧检验和右侧检验,等各种关于假设检验的基础知识

目录 前言&#xff1a; 目标 1 什么叫 假设检验 1.1 假设检验的定义 1.1.1 来自百度百科 1.1.2 维基百科 1.2 假设检验的最底层逻辑&#xff1a;是反证法思想 1.3 假设检验的底层构造&#xff1a;小概率反证法思想 2 什么叫反证法 2.1 反证法的概念 2.1.1 来自百度…