Page MenuHomePhabricator

Migrate WVUI library to Rollup or Vite
Open, Needs TriagePublic

Description

Replace Webpack with Rollup as the module bundler for WVUI.

Event Timeline

@egardner, While rollup is a better choice here, one major drawback to resolve here is lack of Hot Module Replacement that has negative impact on developer experience and speed. There is no good solution of HMR in rollup since it is just bundler. There were some attempts like Nollup, but recently Vite solved this issue. Vite internally uses rollup for bundling, but does extra magic for fast HMR.

Is it a good idea to explore Vite? We get all benefits of Rollup, plus HMR. Vite is very new to this space though.

@santhosh We are on the same page here. I think that Vite gives us the best of both worlds – simpler build tooling with features like HMR that developers are accustomed to getting from Webpack. In particular Vite's "library mode" feature seems ideally suited for what we are doing here.

We're still exploring options, and whether we use Vite for WVUI may depend on a few other factors (like: can we drop IE11 support and migrate VWUI to Vue 3 now, before we start using it in other projects). Vite in library mode can be configured to emit TypeScript definitions, so that is a plus.

The other thing we'd need to figure out would be what to do with tools like Storybook. Would we keep Storybook (which requires Webpack), perhaps moving it into optionalDependencies to avoid downloading it in some contexts? Would we migrate to a framework-agnostic design system tool like Pattern Lab?

@egardner, Thanks.

Perhaps we need to work on frontend build system first and then apply that to WVUI? or generalize the requirements before we pick one for WVUI? Or do you think the bundler for WVUI can be independent of MW frontend build tooling? I think it is possible technically, but might not be wise choice for a coherant frontend architecture.

We need to think about how a bundler will work with our core+extensions+skins system and resource loader. I am not up to date with the current state of planning from Vue migration team about this(I was on extended leave). I would imagine we need a flexible, modular bundler that can produce assets from extension repos that can be integrated with MediaWiki. In that regard, I see Vite's manifest.json with HMR, SSR, library, fast bundler as good promise. But nothing readymade here - we will need to work on connecting mutliple dots, analysing gaps and opportunities.

I won't worry much about storybook right now. The design system decision is not limited to chosing storybook or alternatives IMHO. It need a wider perspective connecting our branding. I wrote some thoughts here

egardner renamed this task from Migrate WVUI library to Rollup to Migrate WVUI library to Rollup or Vite.Feb 24 2021, 3:54 PM

We know that Rollup builds are readable, auditable, faster to generate, and smaller in size.

One new data point for me from @nolan is that they also avoid the kind of indirect "bundler" syntax that makes bundles significantly slower to compile and execute for the browser's javascript engines. This is especially important now that CPU performance, battery saving, and energy cost are increasingly more the bottleneck for performance and user satisfaction (instead of compressed bandwidth transfer size, which still matters but seems no longer more important than time/energy to process that payload, when all else is equal). In this case it wins on both accounts, but it's worth mentioning because if rollup were merely smaller in output, that could actually be a negative point (e.g. T49437#6044157, etc.).

https://channel9.msdn.com/Blogs/msedgedev/nolanlaw-web-perf-crisis