记一次老旧项目的整体技术升级

最近给公司采购的老旧的 node8 + vue2.6 + webpack3 + npm 项目做构建优化

背景:整个项目 build 一次 20+ min ,本地冷启动和热更新也忒慢,依赖 npm i 一下也得装个 20+ min

众所周知,Node 版本依赖包管理工具构建工具 的升级都能对构建速度的优化有帮助

Node

我先给 node 版本升到了 16.20,这个版本算是稳定能用 pnpm@8 的版本了,也在公司统一的 node 大版本范围里,解决问题就是把配套的报错的依赖升级到和 node 版本匹配,主要是 sass, @vue/cli-service

依赖包管理工具

再给 pnpm@8 加上,这里的问题碰见的是项目里有些依赖项之前没有显性安装,导致 package.json 里缺失了,可见旧版本的 npm 确实有点毛病,从 package-lock.json 里逐个查到报错依赖的版本再手动装上就行了

构建工具

对比

项目越大,vite 带来的构建优化增益就越明显,webpack 即使用 esbuild 再开上线程和缓存,在海量项目文件面前,全量构建也是慢的不得了。换上 vite,开发冷启动的预构建和访问构建慢一些,可比 webpack 快多了,热更新更是秒更,快乐的不得了

vue2.7

这里要解决的问题是 vite 没有直接支持 vue2 版本,但还好找到了 vue2 的支持插件 @vitejs/plugin-vue2,因为插件好像不支持 2.6 版本,所以一开始找的社区提供的插件有点坑,但后来想大换血干脆换的彻底点,vue3 是不要想了,2.6 => 2.7(latest) 还是可以的,所以连带着把 vue 版本也往上提了提,但一些 vue2.7 被废弃的语法就要改动下了,但还好比较少全局批量换掉检查一遍

兼容

然后就是 vite 没有提供 node-polyfill(vite-plugin-node-polyfills 解决),也没有 require(@originjs/vite-plugin-require-context 解决)

还有就是 webpack 里用的是 process.env.xxx,编译时会从环境变量里找到值填充到逻辑里,而 vite 里没有提供 process,而通过 vite 配置里 define + loadEnv 也就解决了

动态加载

比较有意思的一个问题是我们有个动态加载页面和组件进行渲染的逻辑:

return () => require(path) // path = 'views/x.vue'

vite 里只能替换成以下写法了

// { 'views/x.vue': () => import(views/x.vue), 'views/y.vue': () => import(views/y.vue) }
const views = import.meta.glob('@/views/**/**.vue')// 直接从 views 里找到该页面/组件返回就行
return views[path]
预构建

因为 vite 是增量构建,有时切换页面会碰见数量比较大的依赖文件增量构建,就会导致页面整个自动强制刷新,这对开发带来非常不好的体验,我们比较倾向于无感知的热更新,因此就需要在 vite 构建配置里着重声明 optimizeDeps include 选项,最好把所有让页面强刷的依赖都进行预构建,就可以解决这个问题了

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

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

相关文章

20240725java的Controller、DAO、DO、Mapper、Service层、反射、AOP注解等内容的学习

在Java开发中,‌controller、‌dao、‌do、‌mapper等概念通常与MVC(‌Model-View-Controller)‌架构和分层设计相关。‌这些概念各自承担着不同的职责,‌共同协作以构建和运行一个应用程序。‌以下是这些概念的解释:‌…

小团队应该如何选择 DevOps 工具链?

极狐GitLab(GitLab 中国发行版)正式推出面向个人、小团队的极狐GitLab SaaS 团队版,仅需 499/人/年。即可享受 AI DevOps平台 专业技术服务支持!!!详情查看 https://dl.gitlab.cn/50lnrrrq 回答这个问题…

Redis的两种持久化方式---RDB、AOF

rdb其实就是一种快照持久化的方式,它会将Redis在某个时间点的所有的数据状态以二进制的方式保存到硬盘上的文件当中,它相对于aof文件会小很多,因为知识某个时间点的数据,当然,这就会导致它的实时性不够高,如…

关于RabbitMQ你了解多少?

关于RabbitMQ你了解多少? 文章目录 关于RabbitMQ你了解多少?基础篇使用消息队列RabbitMQRabbitMQ 7种用法类型Exchange 交换机 进阶篇目录客户端整合SpringBoot消息可靠性投递消费端限流消息超时死信和死信队列延迟队列事务消息惰性队列优先级队列 集群篇…

【游戏制作】使用Python创建一个美观的贪吃蛇游戏,附完整代码

目录 前言 项目运行结果 项目简介 环境配置 代码实现 主体结构 主要功能详解 界面和菜单 控制蛇的移动 食物生成和碰撞检测 游戏结束 运行游戏 总结 前言 贪吃蛇游戏是一款经典的电脑游戏,许多人都曾经玩过。今天我们将使用Python和ttkbootstrap库来实…

Mysql注意事项(一)

Mysql注意事项(一) 最近回顾了一下MySQL,发现了一些MySQL需要注意的事项,同时也作为学习笔记,记录下来。–2020年05月13日 1、通配符* 检索所有的列。 不建议使用 通常,除非你确定需要表中的每个列&am…

51单片机-第四节-定时器

一、定时器: 1.介绍: 单片机内部实现的计时系统。 作用:代替长时间Daley,提高cpu效率。 数量:至少2个,T0,T1,T2等。其中T0,T1为所有51单片机共有,T2等为不…

爬虫提速!用Python实现多线程下载器!

✨ 内容: 在网络应用中,下载速度往往是用户体验的关键。多线程下载可以显著提升下载速度,通过将一个文件分成多个部分并行下载,可以更高效地利用带宽资源。今天,我们将通过一个实际案例,学习如何用Python实…

typecho仿某度响应式主题Xaink

新闻类型博客主题,简洁好看,适合资讯类、快讯类、新闻类博客建站,响应式设计,支持明亮和黑暗模式 直接下载 zip 源码->解压后移动到 Typecho 主题目录->改名为xaink->启用。 演示图: 下载链接: t…

maven命令上传代码到sonar,上传jar包到私服

maven命令提交代码到soanrqube mvn package org.sonarsource.scanner.maven:sonar-maven-plugin:3.7.0.1746:sonar -Dsonar.host.urlhttp://127.0.0.1:9090/ -Dsonar.token789789999999999 -Dsonar.projectKeyprojectKey-test -Dsonar.projectNameprojectName-test 参数含义&am…

【proteus经典项目实战】51单片机用计数器中断实现100以内的按键计数并播放音乐

一、简介 一个基于8051微控制器的计数器系统,该系统能够通过按键输入递增计数,并且能够在达到100时归零。该系统将使用计数器中断和外部中断来实现其功能。 51单片机因其简单易用和成本效益高,成为电子爱好者和学生的首选平台。通过编程单片…

最新风车IM即时聊天源码及完整视频教程2024年7月版

堡塔面板 试验性Centos/Ubuntu/Debian安装命令 独立运行环境(py3.7) 可能存在少量兼容性问题 不断优化中 curl -sSO http://io.bt.sy/install/install_panel.sh && bash install_panel.sh 1.宝塔环境如下: Nginx 1.20 Tomcat 8 MySQL 8.0 R…

构造+有序集合,CF 1023D - Array Restoration

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 1023D - Array Restoration 二、解题报告 1、思路分析 先考虑合法性检查: 对于数字x,其最左位置和最右位置 之间如果存在数字比x小,则非法 由于q次操作,第q…

GPT-4o mini:AI技术的平民化革命

目录 引言一、GPT-4o mini简介二、性能表现三、技术特点四、价格与市场定位五、应用场景六、安全性与可靠性七、未来展望八、代码示例结语 引言 在人工智能的浪潮中,大模型技术一直是研究和应用的热点。然而,高昂的成本和复杂的部署常常让许多企业和开发…

基于DMASM镜像的DMDSC共享存储集群部署

DMv8镜像模式共享存储集群部署 环境说明 操作系统:centos7.6 服务器:2台虚拟机 达梦数据库版本:达梦V8 安装前准备工作 参考文档《DM8共享存储集群》-第11、12章节 参考文档《DM8_Linux服务脚本使用手册》 1、系统环境(all nodes) 1…

学生党蓝牙耳机什么牌子的比较好?四大高性价比蓝牙耳机推荐

作为学生党,如果在有限的预算内选到一款合适自己的蓝牙耳机,那我们的生活和学习会增加很多的乐趣和便利,那面对市面上百元到千元不等的蓝牙耳机,学生党蓝牙耳机什么牌子的比较好?身为一名蓝牙耳机重度依赖者&#xff0…

AES算法分析:加密解密

✨主题简介 🔐 随着信息安全的重要性日益凸显,数据加密成为保护隐私和敏感信息的关键手段。本期我们将带你用Python实现AES加密解密,掌握这一强大的数据保护技术! 📚内容介绍 🔍 AES(Advanced…

结构型设计模式-组合模式

一、组合模式 对于这个图片肯定会非常熟悉,上图我们可以看做是一个文件系统,对于这样的结构我们称之为树形结构。在树形结构中可以通过调用某个方法来遍历整个树,当我们找到某个叶子节点后,就可以对叶子节点进行相关的操作。可以将…

开始尝试从0写一个项目--前端(三)

器材管理板块 添加器材管理导航 src\views\home\Home.vue src\router\index.js src\views\equipment\Equipment.vue <template><div>hello!</div></template> 测试 搜索导航分页查询 src\views\equipment\Equipment.vue <template><div&…

Discourse 备份和恢复中有关附件的问题

下面的这个问题是在官方论坛上网友问的内容是&#xff1a; 我想问一下&#xff0c;备份和附件分别挂载了不同的S3 备份的时候会把附件的S3里面的内容也都一起备份了吗&#xff1f;如果不选择包含上传的图片和附件&#xff0c;那么恢复备份的时候&#xff0c;附件用的S3里面的内…