Improving performance of large codebase on mobile.

Hi, I’ve project were there are a lot of pages and components. The codebase generated by plasmic is about 9mb of js with about 2.6 of css (webpack minified) and is very slugish on mobile phones. There are a lot of manual overrides on specific components that do repeat across them. Is it a good idea trying to move to mixins that are specific for small css rules and apply those to the elements insthead of doing inline changes? Will it improve performance on mobile phones? Do you think this improvment will be significant enough to justify the effort? for example the rule “align-items: center;” appears in 528 classes, will it make sense to create a mixin like “horizontal-align-center” to replace this 528 entries with just one?

Im also having similar codebase size questions.

Hi! Making them into mixins won’t help because the mixin styles will be inlined into the css rule for now.

Since you’re using codegen, one thing you could try is to code split (with dynamic import) at the route level, so you’re only loading the subset of styles and js for each route.