0
点赞
收藏
分享

微信扫一扫

1.7.C++项目:仿muduo库实现并发服务器之Poller模块的设计

岁月不饶人老不正经 2023-10-06 阅读 14

虽然webpack是前端工程编译工具的王者,但是最近vite牛逼吹的震天响,说什么开发/生产打包速度甩webpack 100条街。不管是不是事实,总得尝试一下吧。

于是说干就干,在网上找了很多资料,终于搞定了,以下就是react项目从webpack迁移到vite的详细步骤:

1. 安装依赖:vite, @vitejs/plugin-react-swc, vite-plugin-imp(解决antd按需引入的问题)

同时从package.json文件中删除webpack相关依赖项和react-script依赖项(如果有)

2.  修改package.json的script部分的内容,如下所示:

5. 将index.html文件从public目录移到项目的根目录,并删除里面所有的%PUBLIC_URL%字符串,并在script标签下增加type="module"项目(这个是重点!!!)

 6. 创建vite.config.ts文件,内容模板如下:

然后通过yarn start 命令启动react项目:

启动看起来挺快的,实际访问一下web页面看一下:

可以看到加载页面还是挺慢的,首次加载花费了差不多一分钟,其中antd.js耗费了40.8秒

说实话感觉vite还是吹逼过头了,开发服务器的实际加载也没觉得有多快。

然后再来看看生产打包的速度:

运行yarn build 即可:

首次打包:花了90.72秒,时间还是挺长的

 修改生产配置项,再次打包:42.94秒

继续修改生产配置项,接着打包: 25.37秒

总结一下: vite的开发服务器的编译渲染还是很慢的,证明了vite确实在吹逼。

    vite的生产打包首次非常慢,再次打包速度会变快,应该是采取了某种缓存机制。

vite强制浏览器使用es module模式(能识别import/export语法),限制了vite打包文件的兼容性

基于以上几点,不推荐使用vite,还是webpack更稳,慢是慢点,但是方案最成熟,兼容性好,而且功能强大。而且没看到vite快多少,反而是一堆问题。

举报

相关推荐

0 条评论