背景

公司项目刚好要重构，之前用的是webpack，重构使用vite，下面从开发体验和生产环境两方面说明我们的失败原因，我们的技术栈是vue2 + ssr

开发体验

首屏加载时间长

项目迭代了8年以上，按照vite每个文件都发出一个请求的话，从谷歌控制台看有2133个请求，首屏加载时间有38.29s，项目已经尽可能进行了按需加载

当时面对如此多的请求，自然想开启http2,但是当使用proxy代理接口(前后端分离时会使用到)的时候，http2无法开启，此路不通

代码无法更新

当修改代码时，会出现即使强制刷新了浏览器，文件也没更新到浏览器，导致只能使用vite --force,每次发现无效的时候就重新启动vite服务,由于时间关系，没能追查到原因

热更新导致频繁报错

vite热更新很快，但是频繁修改代码时，控制台会出现报错，导致后续热更新也异常，需要重新刷新

小结

• 由于会出现偶发的代码没法更新，需要禁用vite缓存，并重新启动vite服务，再次访问，每次开发的时间等于vite启动时间 + 无缓存的请求时间之和，vite在我们项目开发模式下，并没有想象中那么省时间

生产环境

将css重复打包到js

在开发几乎完成的时候，发现了vue2 + vite打包的时候，会把css重复打包进js中

后续给vite-plugin-vue2提了issue，作者没回复，在后面偶然间发现是esbuild的问题，目前已经修复

rollup打包按需加载报错

() => import('x.vue') 这样的语法，在ssr的时候会出现报错，经过排查最终发现是vue的问题，PR 目前还没回复,也许我应该@一下vue core team的人？

内联元素的间隙被去掉

由于我们的cli是自行搭建的，没用使用vue-cli,默认是保留了内联元素之间的间隙，但是切换到vite之后，发现间隙丢失 ,这导致了布局异常，经过排查这属于vue-cli的默认行为，于是给vite-plugin-vue2提了PR，避免后续不是使用vue-cli的人接入vite-plugin-vue2看到内联元素间隙丢失很疑惑。

换行样式无法被解析

issue

为什么我们迁移到了webpack

1. 由于vite修改代码会出现无法更新的问题，导致每次都要禁用缓存重新启动vite并刷新页面，而每次大量的初始化请求，使得首屏时间到了38.29s,vite在我们项目中，无法发挥优势，这是一大原因

2. 生产环境当时迁移的时间点，会把css重复打包到js，这个行为增加了特别多的体积,其次在SSR按需加载时，也会报错

基于上面2点，我们迁移到了webpack，同时针对开发体验进行优化，得益于webpack5的新缓存系统，首次启动101s,二次启动和热更新都在6s

实际上，webpack5也可提供了按需编译的功能,可以针对按需加载和其他entry做按需编译，暂时没发现问题，对大量按需加载和多页面应用来说，是一个很好的选择

目前为止，开发体验上的时间，大家都觉得合适，只有第一次的时候才会100多s，后续时间在6s左右，还能接受，加上解决了生产环境的问题，webpack成为我们的最终方案

小结

目前生产环境vue2+vite在SSR的情况下，使用按需加载会报错

总结

• vite针对一些初始化体积较大情况下(实在没法按需加载了)，没有理想情况好，如果修改代码或者热更新导致代码无法更新，体验会更差，希望vite继续优化这些问题，在开发环境上vite我是看好的

• 生产环境下，rollup + vue2 +ssr 会存在按需报错的情况，rollup 的import() 和 bundle split 定制化没有webpack 强等问题

• 理想情况下自然是开发环境用vite，生产环境用webpack,这点社区大佬们已经在做了

• 项目是vue2 + vite + ssr,目前来说只剩下生产环境按需加载会报错这个问题，有这个技术栈想要迁移的小伙伴可以尝试了，这个问题我也会跟进我的PR