background

The company’s project just needs to be reconstructed, webpack was used before, and Vite was used for reconstruction. The reasons for our failure are explained below from two aspects of development experience and production environment. Our technology stack is VUe2 + SSR

Development experience

The first screen takes a long time to load

The project has been iterating for over 8 years, and if you make one request per file according to Vite, there are 2133 requests from The Google console, the first screen load time is 38.29s, and the project has been loaded on demand as much as possible

Http2 cannot be enabled when the proxy interface is used. Http2 cannot be enabled when the proxy interface is used

Code cannot be updated

When modifying the code, the file is not updated to the browser even though the browser is forced to refresh. As a result, you can only use vite –force. Every time the vite service is found to be invalid, the vite service is restarted

Hot updates cause frequent errors

Vite hot updates are fast, but if you change the code frequently, the console will report an error, causing subsequent hot updates to be abnormal and requiring a refresh

summary

  • Disable code because it cannot be updated due to accidental occurrencesviteCache and restartviteServices are accessed again at each development timeIs equal to theviteSum of startup time + request time without cache.viteIn our project development mode, it doesn’t save as much time as we thought

The production environment

Repackage CSS into JS

When the development was almost complete, it was discovered that the VUe2 + Vite package would repeatedly package CSS into JS

I later raised an issue to vite-plugin-vue2, but the author didn’t reply. Later, I accidentally found that it was an ESbuild problem, which has been fixed now

Rollup package loads on demand reporting an error

() => import(‘x.vue’) syntax, there will be errors in SSR, after investigation, it was found that the problem is VUE, PR hasn’t replied yet, maybe I should @ the vue core team?

Gaps in inline elements are removed

Since our CLI was built by ourselves and vue-plugin-vue2 was not used, the gap between inline elements was retained by default. However, after switching to Vite, we found that the gap was lost, which led to the abnormal layout. After investigation, this was the default behavior of VUe-cli, so WE raised PR for vuite-plugin-vue2. Avoid confusion when people who are not using vue-CLI access vuite-plugin-vue2 and see the gap loss of inline elements.

A newline style cannot be parsed

issue

Why did we migrate to Webpack

  1. Because the modified code of Vite could not be updated, it was necessary to disable cache, restart Vite and refresh the page every time, and a large number of initialization requests made the first screen time 38.29s, which was a big reason that Vite could not play its advantages in our project

  2. The production environment will repeatedly pack CSS into JS at the time of migration, which adds a lot of volume, and will also report errors when SSR is loaded on demand

Based on the above two points, we migrated to Webpack and optimized the development experience. Thanks to the new cache system of Webpack 5, the first startup 101s, the second startup and hot update are all in 6s

In fact, webpack5 also provides on-demand compilation, which can be compiled on demand for load on demand and other entries. No problem found, it is a good choice for a large number of load on demand and multi-page applications

So far, we all agree that the development experience time is appropriate. Only the first time will be more than 100 seconds, and the follow-up time will be about 6s, which is acceptable. In addition, webpack has become our final solution after solving the problem of production environment

summary

Current production environment vue2+ Vite in the case of SSR using on demand loading error

conclusion

  • Vite for some large initial volume (really can not load on demand), not ideal situation is good, if the code modification or hot update can not update the code, the experience will be worse, I hope vite continue to optimize these problems, in the development environment Vite I am optimistic

  • In production environment, rollup + vue2 + SSR will report errors on demand, rollup import() and bundle split customization is not as strong as Webpack

  • The ideal would be vite for development and WebPack for production, something the community leaders are already doing

  • The project is VUe2 + Vite + SSR. At present, the only problem left is that loading on demand in production environment will cause errors. Friends who have this technology stack and want to migrate can try it