带你玩转 Vite + Vue3 高低版本常用玩法

这篇具有很好参考价值的文章主要介绍了带你玩转 Vite + Vue3 高低版本常用玩法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、首先来个 Vite 的通用简介

Vite 是一种新型前端构建工具,在我们保险前端项目中已经推动并应用很久了,Vite 能够显著降低构建时间,提升前端开发效率。

它主要由两部分组成:

  • 一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)
  • 一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源

Vite 还提供了强大的扩展性,可通过其 插件 API 和 JavaScript API 进行扩展,并提供完整的类型支持。

二、Vite 的优势,为什么使用 Vite ?

当我们开始构建越来越大型的应用时,需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈:通常需要很长时间(甚至是几分钟!)才能启动开发服务器,即使使用模块热替换(HMR),文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复,严重影响开发人员的效率。

当冷启动开发服务器时,基于打包器的方式启动必须优先抓取并构建你的整个应用,然后才能提供服务,如果项目很大,导致的一个必然结果就是,服务启动很慢,热更新很慢,效率降低。Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码,即只在当前屏幕上实际使用时才会被处理,节省启动及更新时间。

如下图是新旧项目启动时长对比,Vite 启动速度,快了 30 多倍

常规的通过 webpack 启动的服务,基于打包器启动,整个重新构建,即使将构建内容放到缓存中,更新速度也会随着应用体积增长而直线下降:

Vite 在原生 ESM 基础上执行 HMR,Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失活(大多数时候只是模块本身),使得无论应用大小如何,HMR 始终能保持快速更新:

三、Vite 为我们开发提升了很大的效率,但是也会有一些小问题

1、使用 Vite + Vue3 +Element-plus 或者其他 UI 库,按需加载使用时,多人开发,每人页面重新 reload 了吗🤓?

2、低版本 Vite(2.9以下)配置 Preview 的 proxy 时,是不是不生效🤓?

3、低版本 Vite 配合 unocss 设置样式后,是不是热更新不生效🤓?

4、部分依赖包,使用京东镜像,是不是无法下载🤓?

如果你遇到了以上问题,那这边文章可以帮助你解决困惑!

四、解决页面 reload 问题:高低版本 Vite 解决方法不同

  • 原因:UI 库配置按需加载,点击跳转新页面,导致重新 reload 页面
  • 情况:高低版本 Vite 解决页面 reload 方法不同

问题现象如下,上方图片页面会 reload会有一段时间白屏,下方图片中文件 preload:

1、Vite 低版本(v2.9以下)页面 reload 解决方法;

  • 解决方法:提前进行依赖包的预加载,可通过如下两种方法配置,推荐方法b(因为低版本有现成插件);
  • 通过这些配置,就能够使页面 reload 在多人开发时只进行一次。

注意事项(低版本 Vite 的 bug,高版本已经修复):

  • 使用 unocss 时,热更新会失效,需要手动刷新页面,如果不使用 unocss 影响不大

方法a、通过手动配置 vite.config.ts 文件的 optimizeDeps 选项;

// vite.config.js
{
    ...
    optimizeDeps: {
        include: [
            'vue',
            'vue-router',
            'pinia',
            '@element-plus/icons-vue',
            'driver.js',
            'element-plus',
            'element-plus/es',
            'element-plus/es/components/alert/style/index',
            'element-plus/es/components/badge/style/index',
            'element-plus/es/components/breadcrumb-item/style/index',
            'element-plus/es/components/breadcrumb/style/index',
            'element-plus/es/components/button/style/index',
            'element-plus/es/components/card/style/index'
            ...
        ]
    }
}

方法b、使用现成的插件 vite-plugin-optimize-persistvite-plugin-package-config (推荐原因: 自动会生成预加载配置文件 optimizeDeps),通用配置如下:

😂遗憾的是高版本(v2.9及以上失效)配置无效,有兴趣的话,可以试着修改下源码。

// vite.config.ts
// 两个插件组合使用,会自动生成 optimizeDeps 配置,默认生成到 package.json 文件中,可通过 PkgConfig() 修改生成目录
import OptimizationPersist from 'vite-plugin-optimize-persist'
import PkgConfig from 'vite-plugin-package-config'

export default {
  ...
  plugins: [
    ...
    PkgConfig(),
    OptimizationPersist()
  ]
}

2、Vite 高版本(v4+)页面 reload 解决方法:

  • 解决方法:上述两个插件已被弃用,只能自己配置 optimizeDeps 选项,提前进行依赖包的预加载;

全量配置案例如下,备注:如果项目中使用,根据项目需要进行相应依赖包的配置,否则会出现首屏加载过慢的问题,类似我们常规使用的 webpack 一样;

// vite.config.js

{
    ...
    optimizeDeps:{
         include: [
            '@element-plus/icons-vue',
            '@tinymce/tinymce-vue',
            '@vueuse/core',
            '@vueuse/shared',
            'axios',
            'clipboard',
            'codemirror',
            'codemirror/addon/lint/json-lint',
            'codemirror/addon/lint/lint',
            'codemirror/mode/css/css',
            'codemirror/mode/htmlmixed/htmlmixed',
            'codemirror/mode/javascript/javascript',
            'driver.js',
            'element-plus',
            'element-plus/es',
            'element-plus/es/components/alert/style/index',
            'element-plus/es/components/badge/style/index',
            'element-plus/es/components/breadcrumb-item/style/index',
            'element-plus/es/components/breadcrumb/style/index',
            'element-plus/es/components/button/style/index',
            'element-plus/es/components/card/style/index',
            'element-plus/es/components/cascader/style/index',
            'element-plus/es/components/check-tag/style/index',
            'element-plus/es/components/checkbox-group/style/index',
            'element-plus/es/components/checkbox/style/index',
            'element-plus/es/components/col/style/index',
            'element-plus/es/components/color-picker/style/index',
            'element-plus/es/components/config-provider/style/index',
            'element-plus/es/components/date-picker/style/index',
            'element-plus/es/components/dialog/style/index',
            'element-plus/es/components/divider/style/index',
            'element-plus/es/components/drawer/style/index',
            'element-plus/es/components/dropdown-item/style/index',
            'element-plus/es/components/dropdown-menu/style/index',
            'element-plus/es/components/dropdown/style/index',
            'element-plus/es/components/empty/style/index',
            'element-plus/es/components/form-item/style/index',
            'element-plus/es/components/form/style/index',
            'element-plus/es/components/icon/style/index',
            'element-plus/es/components/input-number/style/index',
            'element-plus/es/components/input/style/index',
            'element-plus/es/components/link/style/index',
            'element-plus/es/components/loading/style/index',
            'element-plus/es/components/menu-item/style/index',
            'element-plus/es/components/menu/style/index',
            'element-plus/es/components/message-box/style/index',
            'element-plus/es/components/message/style/index',
            'element-plus/es/components/notification/style/index',
            'element-plus/es/components/option/style/index',
            'element-plus/es/components/pagination/style/index',
            'element-plus/es/components/popover/style/index',
            'element-plus/es/components/progress/style/index',
            'element-plus/es/components/radio-group/style/index',
            'element-plus/es/components/radio/style/index',
            'element-plus/es/components/row/style/index',
            'element-plus/es/components/scrollbar/style/index',
            'element-plus/es/components/select/style/index',
            'element-plus/es/components/space/style/index',
            'element-plus/es/components/step/style/index',
            'element-plus/es/components/steps/style/index',
            'element-plus/es/components/sub-menu/style/index',
            'element-plus/es/components/switch/style/index',
            'element-plus/es/components/tab-pane/style/index',
            'element-plus/es/components/table-column/style/index',
            'element-plus/es/components/table/style/index',
            'element-plus/es/components/tabs/style/index',
            'element-plus/es/components/tag/style/index',
            'element-plus/es/components/timeline-item/style/index',
            'element-plus/es/components/timeline/style/index',
            'element-plus/es/components/tooltip/style/index',
            'element-plus/es/components/transfer/style/index',
            'element-plus/es/components/upload/style/index',
            'element-plus/es/components/popconfirm/style/index',
            'element-plus/es/components/backtop/style/index',
            'element-plus/es/components/affix/style/index',
            'element-plus/es/components/statistic/style/index',
            'element-plus/es/components/tree/style/index',
            'element-plus/es/components/tree-v2/style/index',
            'element-plus/es/components/tree-select/style/index',
            'element-plus/es/components/table-v2/style/index',
            'element-plus/es/components/skeleton/style/index',
            'element-plus/es/components/skeleton-item/style/index',
            'element-plus/es/components/collapse/style/index',
            'element-plus/es/components/collapse-item/style/index',
            'element-plus/es/components/collapse-transition/style/index',
            'element-plus/es/components/carousel/style/index',
            'element-plus/es/components/carousel-item/style/index',
            'element-plus/es/components/calendar/style/index',
            'element-plus/es/components/badge/style/index',
            'element-plus/es/components/avatar/style/index',
            'element-plus/es/components/aside/style/index',
            'element-plus/es/locale/lang/zh-cn',
            'fuse.js',
            'js-base64',
            'js-cookie',
            'js-file-download',
            'nprogress',
            'pako',
            'path-browserify',
            'path-to-regexp',
            'pinia',
            'prismjs',
            'qs',
            'screenfull',
            'sortablejs',
            'vue',
            'vue-json-pretty',
            'vue-router',
            'vuedraggable' 
         ]
    }
}

五、解决 Vite 低版本(v2.9以下),preview 配置 proxy 不生效:

问题原因:低版本 Vite 的执行 preview 预览时,使用的 proxy 是 server 中的 proxy 配置,官方文档中提供的 preview 的 proxy 无效,这是低版本 Vite 的一个 bug,高版本已经修复,github 上有相关的 issue,也可以通过源码查看。

解决办法:

  1. 在 vite.config.js 使用 server 中的 proxy 代替

  2. 使用 switchhost 进行代理配置

六、解决 Vite 低版本(v2.9以下),unocss 热更新失效:

  1. 解决方法a:升级 Vite,从根本解决问题,以后项目升级比较方便,各种小问题容易规避,推荐升级

  2. 解决方法b:降低 unocss 的版本,可能会出现各种其他问题,不建议

针对这个问题,作者没有降低 unocss 的版本,直接进行 Vite 升级,如果使用 unocss 强烈建议进行 Vite 升级;

不升级后期如果使用其他的依赖包,可能也会有各种其他问题出现

七、解决升级 Vite 项目后,部分依赖包,使用京东镜像无法下载:

产生原因:各种依赖包之间互相依赖,京东镜像的 npm 包可能有问题;

解决方法:非京东私有依赖包,使用 npm 官方镜像下载,京东私有镜像使用京东镜像,初始化项目,生成 package-lock.json 文件,多人合作时,以 package-lock.json 文件为主。

总结:Vite 帮助我们提升开发效率,但是区分 Vite 是否需要使用最新版本,还是需要作为考虑依据:

如果你的项目不使用 unocss,同时对于 preview 下的 proxy 没有特殊要求,那么 Vite2.8.6 + Vue3 + elementPlus 可自动生成预加载文件,省时省力,开发体验好,强烈推荐;如果你的项目使用 unocss 或者对于 preview 下的 proxy 有特殊需求,强烈建议使用最新版本的 Vite,可通过手动配置 optimizeDeps 解决页面刷新的问题。

作者:京东保险 王升升

来源:京东云开发者社区 转载请注明来源文章来源地址https://www.toymoban.com/news/detail-748864.html

到了这里,关于带你玩转 Vite + Vue3 高低版本常用玩法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 带你玩转单向链表(学习必备)

    本篇文章主要介绍数据结构中 单向链表 各种操作,适合有 C语言基础 的同学,文中描述和代码示例很详细,干货满满,感兴趣的小伙伴快来一起学习吧! ☀️大家好!我是新人博主朦胧的雨梦,希望大家多多关照和支持😝😝😝 🌖大家一起努力,共同成长,相信我们都会

    2024年02月02日
    浏览(50)
  • 带你玩转三子棋—【C语言】

    目录 前言: 1. 菜单的打印 2. game函数的实现 2.1 初始化棋盘 2.2 显示棋盘 2.3 玩家下棋 2.4 电脑下棋 2.5 判断输赢 2.6 判断棋盘是否满了 3. 全部代码 3.1 game.h 3.2  game.c 3.3 test.c 为了实现三子棋,首先我们应该将代码分模块编写,我们分为3个部分 1. test.c —测试游戏(主函数)2

    2024年02月04日
    浏览(48)
  • 一文带你玩转C语言文件操作

    作者主页:  paper jie的博客_CSDN博客 本文作者: 大家好,我是paper jie,感谢你阅读本文,欢迎一建三连哦。 本文录入于 《系统解析C语言》专栏,本专栏是针对于大学生,编程小白精心打造的。笔者用重金(时间和精力)打造,将算法基础知识一网打尽,希望可以帮到读者们哦

    2024年02月17日
    浏览(62)
  • 【C语言】带你玩转库函数qsort

    君兮_的个人主页 勤时当勉励 岁月不待人 C/C++ 游戏开发 Hello,米娜桑们,这里是君兮_,之前更新的一直是比较基础和简单的内容,随着博主自己的水平的提升,今天给大家带来点不一样的东西,我们今天要讲的是库函数qsort的用法 废话不多说,咱们直接开始吧! 很多人可能是

    2024年02月16日
    浏览(40)
  • Python | 带你玩转Python的各种文件操作

    本篇文章主要介绍Python的各种文件操作,适合刚入门的小白或者对于文件操作基础不太牢固的同学,文中描述和代码示例很详细,看完即可掌握,感兴趣的小伙伴快来一起学习吧。 ☀️大家好!我是新人小白博主朦胧的雨梦,希望大家多多关照和支持😝😝😝 🌖大家一起努

    2023年04月11日
    浏览(73)
  • 【Linux】32条指令带你玩转 Linux !

    目录 1,whoami 2,who 3,pwd 4,ls 1,ls  2,ls -l 3,ls -a 4,ls -al 5,ls -d  6,ls -ld 5,clear 6,cd 1,cd  2,cd . 3,cd .. 4,cd /home/litao/linux/  绝对路径 5,cd ../day02/   相对路径 6,cd ~ 7,cd - 7,tree 8,touch 9,mkdir 1,mkdir 2,mkdir -p 10,rmdir rm 1,rmdir 2,rm 3,rm -f 4,rm -r 5,rm -rf 6,

    2024年02月08日
    浏览(57)
  • 内网穿透技术 - 带你玩转Ngrok和NATAPP

    使用内网穿透技术,我们出差或者在家,就可以直接访问到公司的电脑或者内网网站,实现远程办公。也可以将我们自己在局域网内搭建的网站暴露出去,让所有人都可以直接访问到。 本文章主要介绍下内网穿透工具Ngrok和NATAPP。 Ngrok 开源,老牌穿透工具 NATAPP 免费隧道,提

    2024年02月15日
    浏览(38)
  • 带你玩转 ui 框架 ——scoped及样式穿透问题详解

    前言 在我们前端的开发中经常会使用到各种 ui 框架 下面这两个是比较火的,也是我常用的两个ui框架。 问题描述 但是在使用框架的时候难免会遇到需要改变组件中的一些样式,当然如果我们所有页面的组件样式都是统一的话,我们可以进行全局设置样式,但是如果我们仅仅

    2023年04月21日
    浏览(47)
  • 带你玩转 3D 检测和分割 (三):有趣的可视化

    小伙伴们好呀,3D 检测和分割系列文章继续更新啦,在第一篇文章中我们带领大家了解了整个框架的大致流程,第二篇文章我们给大家解析了 MMDetection3D 中的坐标系和核心组件 Box,今天我们将带大家看看 3D 场景中的可视化组件 Visualizer,如何在多个模态数据上轻松可视化并且

    2023年04月21日
    浏览(52)
  • 45天带你玩转Node(第一天)初探Node.js

    45天带你玩转Node 粉丝要求博主系统的写一篇关于Node.js的学习资料,但其实我们的Node.js知识点并不少,所以博主为大家搭建了一个专栏,为了方便大家系统的学习Node.js,大家记得订阅哦!虽然我们的Node.js还很年轻,但是他也已经有了很高的地位,让我们尽情的畅游在Node.js的

    2024年02月12日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包