Webpack to Vite踩坑指北

Webpack to Vite踩坑指北

作者: 习惯水文的前端苏 | 来源:发表于2022-09-23 20:08 被阅读0次

$\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踩坑指北

本文链接：https://www.haomeiwen.com/subject/tljvortx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

栏目导航

热点阅读

webpack

js css html

vite

关于我们|服务条款|联系我们|Webpack to Vite踩坑指北|投稿指南|网站地图|RSS订阅|排版工具|手机版

提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网版权所有

备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！