Webpack to Vite踩坑指北

三岁就会写BUG 2023-03-28 原文

$\bullet$ 前言

最近一直在看vite的源码（传送）,恰逢公司的项目使用的是webpack，正好借此机会做下迁移，并将该过程记录。当前项目使用webpack+vue2

$\bullet$ 对比

这里挑选了一个比较复杂的路由页面，分别使用vite和webpack启动，记录从npm run start到页面加载的耗时

vite

webpack

$\bullet$ 基础改造

$\ast$ package.json中新建指令

$\ast$ alias别名

和webpack一样，配置resolve.alias

$\ast$ 全局变量注入

使用vite内置的define代替webpack的DefinePlugin

$\ast$ proxy代理

定义server.proxy代替webpack的proxyTable，写法上仅框红的一处不太一样

$\ast$ 适配vue2

yarn add vite-plugin-vue2，并在vite.config.js中引入并注册使用

$\bullet$ 错误修复

$\ast$ 白屏

$\alpha$ 报错

运行npm run dev:vite后打开浏览器，页面空白，可以看到入口的index.html中并没有引入script标签

$\beta$ 修复

yarn add vite-plugin-html，并在vite.config.js中引入并注册使用，其entry配置项即可帮助我们自动注入script标签

$\ast$ 默认扩展名称

$\alpha$ 报错

不指定.vue扩展名称，会报如下错误

点开该报错，感觉app并不是一个正常的文件

故找到引用处，尝试添加.vue扩展名后重启，报错如下

$\beta$ 修复

此时已经基本可以确定是省略扩展名称导致的了，故在resolve中增加如下配置

$\ast$ require语法报错

$\alpha$ 报错

$\beta$ 修复

在webpack中能直接使用是因为其内部帮我们做了处理，在vite中需要单独引入插件（yarn add vite-plugin-require-transform）

$\ast$ 替换global

$\alpha$ 报错

$\beta$ 修复

查看报错语句

可以看到，其使用三元运算做了“降级处理”，理论上来说使用false的结果也问题不大

故，使用window来代替global

$\ast$ 修改vue引用版本

$\alpha$ 报错

$\beta$ 修复

这是由于vue包中默认导出的是runtime版本，修改下之前定义的别名即可

$\ast$ 依赖注入

$\alpha$ 报错

$\beta$ 修复

在webpack中通过ProvidePlugin提前注入相关依赖而不需要在页面中显示引入，在vite中可以使用@rollup/plugin-inject来代替

$\ast$ 插件报错

$\alpha$ 报错

$\beta$ 修复

由于本次目的仅仅是为开发环境做改造，故为了尽可能少的影响生产，这里随便写个插件过滤下

$\ast$ vite-plugin

$\alpha$ 报错

$\beta$ 修复

这是之前我优化面包屑时候写的webpack的loader，需要按照vite插件的语法格式做下替换，将直接export的方式改为返回一个包含name和transform的对象的函数即可

$\ast$ 内置模块

$\alpha$ 报错

$\beta$ 修复

项目中大量使用了node的timers模块的setTimeout方法，这在vite中被视为内置模块是不允许被客户端调用的，估计当初是不小心自动引入的，同样的，我们在插件中识别并替换掉

$\ast$ mqtt

报错如下

查看相关代码，感觉是process相关的错误

故尝试安装process包，并通过inject进行注入

$\ast$ 样式

$\alpha$ 错误

报错如下

$\beta$ 修复

这是因为‘～’符号不被vite识别，因为该符号是vue-cli中的用法，去掉即可

$\ast$ icon失效

$\alpha$ 问题

$\beta$ 修复

在index.html中以cdn的当时引入，这虽然会对生产产生一定的影响，不过理论上其影响可以被忽略

$\ast$ 默认空格

$\alpha$ 问题

目前发现的，按钮直接的默认的空隙没了

$\beta$ 修复

修改默认编译方式为preserve就可以了

$\ast$ 路由改造

由于vite本身就是按需加载的，则我们在路由中进行的懒加载就显得有点鸡肋，而且还会影响vite的预构建行为

故考虑将路由引用方式做调整，同样出于仅作用于本地开发环境的考虑，需要在plugin阶段做下转换，即：

将如下引入方式

通过plugin替换为如下形式

则随便写点正则

替换结果如下

取舍

这确实能有效避免二次预构建行为，也确实有效的提高了部分页面首次加载的时间，但是却导致首屏加载被拖到和webpack持平了，因此到底要不要改造路由方式就仁者见仁了.....

有关Webpack to Vite踩坑指北的更多相关文章

打通源码，高效定位代码问题｜云效工程师指北 - 2
大家好，我叫胡飞虎，花名虎仔，目前负责云效旗下产品Codeup代码托管的设计与开发。代码作为企业最核心的数据资产，除了被构建、部署之外还有更大的价值。为了帮助企业和团队挖掘更多源代码价值以赋能日常代码研发、运维等工作，云效代码团队在大数据和智能化方向进行了一系列的探索和实践（例如代码搜索与推荐），本文主要介绍我们如何通过直接打通源代码来提高研发与运维效率。随着微服务架构的流行，一个业务流程需要多个微服务共同完成。一旦出现问题，运维人员在面对数量多、调用链路复杂的情况下，很难快速锁定导致问题发生的罪魁祸首：代码。为了提高排查效率，目前常见的解决方案是：链路跟踪+日志分析工具相结合。即通过链路跟踪
camille mumu 模拟器 frida 踩坑记录 - 2
1.了解监管机构已经卷到需要监控进程了，为了跟上通报步伐查了下资料，打算浅试一下camille，依据原作的文档初步了解到需要python3、adb、frida、模拟器（木木-已成功、夜神）、root手机，开始逐个尝试，记录一下所遇到的情况。原作祭上：camille/use.mdatmaster·zhengjim/camille·GitHubhttps://www.cnblogs.com/zhengjim/p/15508738.html2.PythonPython38、pip更新电脑中如果有多个python环境的，记得改好名哦，不然会报错，我是配置了环境变量然后让38的置顶pip如果久没用了也
React hooks中 useState踩坑-=--异步问题 - 2
useState作为最常见的一个hook，在使用中总是会出现各种坑，最明显的就是useState更新异步的问题。比如我们把接口返回的数据，使用useState储存起来，但是当后面去改变这个数据的时候，每次拿到的都是上次的数据，无法实时更新。或者我们在函数内部使用setState，然后立即打印state，打印的结果还是第一次的state的值。比如下面的代码实例。const[data,setData]=useState('111');consthandleTest=()=>{console.log(data)//111setName('222')console.log(name)//111}原因：
微信小程序项目转uniapp踩坑日记 - 2
本文目录一、前言二、转换方式三、后语四、其他：node报错1、包默认C盘存放，而不是安装目录E盘2、正确的环境变量添加3、npminstall命令报错4、npminstall-gexpress报错没有权限一、前言由于想要把之前完成的微信小程序项目转换成uniapp项目，这样的话之后可以编译成其他平台的小程序、网页、安卓、IOS,所以开始了我的踩坑之旅。PS：安卓和IOS还是算了，主要弄其他小程序可以省很多功夫，但是各个平台不一样有的还是要自己来做，但是会省不少力气二、转换方式查看uniapp官方文档知道有工具可以转换，安装工具有两种方式，一种是装npm全局库、另一种是装HBuilderX插件，
【踩坑笔记】linux搭建kafka集群，详细到复制命令就能成功 - 2
虽然公司有运维，但也不能啥都靠他们，万一哪天环境出问题了，你不能一上来就找运维吧，丢脸脸~今天分享一套从零开始搭建一套kafka集群的笔记，我几乎帮你踩了所有的坑，你只需按步骤来，有手就行kafka依赖jdk和zookeeper环境开始之前再啰嗦一句，同样的教程，有人失败有人成功，失败的小伙伴大部门都是路径问题，所以，仔细点，不要慌安装jdk检查下你服务器有没有jdk，如下图就是装了的如果没装，出门右转，先把jdk搞完再回来接着看，linux安装jdk环境搭建zookeeper集群虽然kafka0.5.x以上版本已经集成了zk，但我们最好还是单独部署一套，两个原因1、kafka自带的zk是单机
踩坑记录2——RK3588跑通YOLO v5+DeepSORT - 2
上篇说到RK3588编译OpenCV,这篇记录一下跑通YOLOv5+DeepSORT的愉(chi)快(shi)历程.1.保证编译OpenCV时关联了ffmpeg如果本身缺少ffmpeg而编译了没有ffmpeg版本的OpenCV,则视频无法读取.解决方案参照CSDN,首先安装ffmpeg:sudoaptinstall-yffmpeg之后安装一堆dev:libavcodec-dev、libavformat-dev、libavutil-dev、libavfilter-dev、libavresample-dev、libswresample-dev、libswscale-dev这个时候再去编译OpenC
ElasticSearch 7.6.2版本集群搭建及踩坑 - 2
环境准备服务器说明本次演示采用三台RockyLinux8.5版本服务器服务器IP备注es-master172.16.7.11主节点es-node01172.16.7.501节点es-node02172.16.7.1302节点内核版本[root@es-master~]#uname-aLinuxes-master4.18.0-348.20.1.el8_5.x86_64#1SMPThuMar1020:59:28UTC2022x86_64x86_64x86_64GNU/Linux修改系统名##主节点hostnamectlset-hostnamees-master##node1节点hostnamectl
《Vue插件》瀑布流插件vue-masonry的使用与踩坑记录 - 2
这是一个没有套路的前端博主，热衷各种前端向的骚操作，经常想到哪就写到哪，如果有感兴趣的技术和前端效果可以留言～博主看到后会去代替大家踩坑的～主页:oliver尹的主页格言:跌倒了爬起来就好～《Vue插件》瀑布流插件vue-masonry的使用与踩坑记录前言官网安装与使用基本使用示例参数item-selectortransition-durationcolumn-widthorigin-leftorigin-topgutter小结前言之前其实有分享过一篇纯CSS实现瀑布流的方法:https://oliver.blog.csdn.net/article/details/126450691，但纯CS
[Unity] NodeCanvas 使用方法指北 - 2
最近在做一个NPC的AI，不想写代码，看看库里还有去年HB包里的NodeCanvas，想着拿出来学习一下，不然不知道又得吃多久的灰了... 首先这种高质量的插件都有相应的官方网站，所以我的第一建议是查询官方手册和解决方案：https://nodecanvas.paradoxnotion.com目录一：导入插件二：导入样例三：了解编辑器四：DT示例五：其他技巧六：结语一：导入插件图1-1在菜单栏Tools里看见选项ParadoxNotion即导入成功二：导入样例在下载完成后这个包里是没有Sample样例的，是可能比较迷惑的一点，不过不要担心，官方网站是有提供的，我们参照实例解读学习，下载后正常
cocos creator上架字节跳动（抖音）小游戏注意事项（匿名登录、录屏、分享等踩坑记录） - 2
常见拒绝原因1：小游戏无录屏功能，不符合平台要求2：小游戏录屏时间小于3S，分享按钮点击无反应或提示错误文案，不符合平台要求3：小游戏录屏时间大于300S,分享按钮点击无反应或无法正常分享录屏，不符合平台要求不久前写了款小游戏，最近上架了字节跳动小游戏平台。因为这款游戏在微信小游戏里被归类为角色扮演类（微信平台不允许个人开发者上架角色类游戏），因此考虑上架字节跳动，只要有软件著作权即可。游戏是之前在微信平台已经调试通的，所以只需要按照字节的要求做一点修改就可以了，主要变化如下：1.支持匿名登录微信小游戏只需要调用wx.login获得code，再用code去服务端调用code2Session就能

Webpack to Vite踩坑指北

有关Webpack to Vite踩坑指北的更多相关文章

随机推荐